html5でjQueryに引数を埋め込む適切な方法は？

Question

余分な$('#.').click()関数を避けるために、私はli要素で引数を渡したいと思います。

HTML5で適切な方法は何ですか？

例：

<ul> 
    <li>I'm clickable<code>method|parm1,parm2</code></li> 
.... 
$('li').click(e) function() { 
    //I will read the method and serve... 

Answer 1

<code> 

タグのみをスタイリングのためにそこにある：あなたのケースでは、あなたのような何かをするだろう。

<ul> 
    <li data-method="method" data-params="parm1,parm2">I'm clickable</li> 
    <!--...--> 
</ul> 

Answer 2

data属性を使用することを検討してください。 Embedding Custom Non-Visible Data with Data Attributesをご覧ください。

<ul> 
    <li data-code="method|parm1,parm2">I'm clickable</li> 
    .... 

<script> 
    $('li').click(function(e) { 
    var code = $(e.target).data("code"); 
    // I will read the method and serve... 

Answer 3

は、あなたが直接onclick属性、または他の回答で述べたようdata属性、あるいはhref="javascript:myFunction(param1, param2);return false;"を使用することができますが、アイデア自体は間違ってい私見です：あなたは、おそらくデータがそうのような属性を使用する必要があります。マークアップにはコードを含めないでください。非常に多くの要素が変数で同じ種類の効果を持つ場合は、ジェネリックセレクタを使用してすべてを一致させ、data属性を使用して値を保存し、jQueryを使用してコードを呼び出します。コードはマークアップから分離する必要があります。

JS

$(function() { 
    // Note all code is in the same block 

    // Note how I cached the things I thought I may need later 
    var $colorList = $("#colorChangeDemo"); 
    var $colorLinks = $colorList.find("a.color-change"); 

    function changeColor(event) { 
     var $colorLink = $(this); 
     var color = $colorLink.data("color"); 
     $colorLinks.css("color", color); 
     event.preventDefault(); 
     return false; 
    } 

    $colorLinks.click(changeColor); // Can be separate function 
}); 

HTML

<ul id="colorChangeDemo"> 
    <li><a class="color-change" href="#" data-color="#f00">Red</a></li> 
    <li><a class="color-change" href="#" data-color="#0f0">Green</a></li> 
    <li><a class="color-change" href="#" data-color="#00f">Blue</a></li> 
</ul> 

：

例は、あなたがそのリンクをクリックして、リストのテキストの色を変更したいと言うことができます実例：

http://jsfiddle.net/u6syK/2/

。

もちろん例外があるかもしれませんが、あなたはこの道を行く良い理由があるかもしれませんが、それはしばしばコード匂いです。