程式筆記本

簡單來說我是要透過固定格式的網址，運用span（display:none）放參數去組合出連結。

然後運用css的方式製作按鈕，html會很乾淨，連結透過jquery產生，css製作美觀按鈕。

html

                <dl>
                    <dt><a>點心</a></dt><span>01</span>
                    <dd class="four">&nbsp;</dd>
                    <dd class="sea">&nbsp;</dd>
                </dl>
                
                <dl>
                  <dt><a>點心試是<br />
                  試看試</a></dt><span>11</span>
                    <dd class="four">diamˋximˊ</dd>
                    <dd class="sea">diamˊsimˋ</dd>
                </dl>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">
google.load("jquery", "1.6");

</script>
<script type="text/javascript">
 $(function(){
    
    var word_url = "upload/wma/talk/2011Dec/word/"; //單字路徑
    var dialogue_url = "upload/wma/talk/2011Dec/dialogue/"; //對話路徑
    var jsclick = "javascript:javascript:wav";
    
    
    // 單字-四縣腔
    $(".word .four").each(function (i) {
      $(this).prepend( "<a href=\""
        + jsclick + "('" + word_url + "four/" +
        $(this).parent().find("span").text() + ".wma')\" >" +
        "</a>"
      );
    });
    
    // 單字-海陸腔
    $(".word .sea").each(function (i) {
      $(this).prepend( "<a href=\""
        + jsclick + "('" + word_url + "sea/" +
        $(this).parent().find("span").text() + ".wma')\" >" +
        "</a>"
      );
    });

    // 對話
    $(".dialogue li").each(function (i) {
      var num = $(this).find("span").text();
      $(this).prepend(
        "<a class=\"four\" href=\"" + jsclick + "('" + dialogue_url + "four/" + num + ".wma')\" >" + "</a>" +
        "<a class=\"sea\"  href=\"" + jsclick + "('" + dialogue_url + "sea/" + num + ".wma')\" >" + "</a>"
        
      );
    });

    
      $(".word .four").click(function(){
      
        alert($(this).prev().find("span").text());
      
        });
 
  });

</script>