將參數嵌入jQuery與html5的正確方法？

爲了避免過度$('#.').click() -functions，我想傳遞的參數在li元素。將參數嵌入jQuery與html5的正確方法？

什麼是HTML5中的正確方法？

例如：

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

來源

2011-12-30 Teson

的

<code>

標籤是有唯一的造型。你或許應該使用像這樣的數據屬性：

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

來源

2011-12-30 11:02:13 Slavic

完美契合。謝謝。 – Teson 2011-12-30 11:08:08

考慮使用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...

來源

2011-12-30 11:00:55 toddsundsted

無法找到，在http://www.w3schools.com/html5/html5_reference.asp？ – Teson 2011-12-30 11:01:45

啊，現在我明白了。謝謝。 – Teson 2011-12-30 11:04:49

我添加了一個w3規範的鏈接。 – toddsundsted 2011-12-30 11:04:54

可以使用onclick屬性直接，或在其他的答案中提到的data的屬性，甚至href="javascript:myFunction(param1, param2);return false;"，但這個想法本身就是錯誤恕我直言。標記不應包含代碼。如果很多元素對變量具有相同的效果，請使用通用選擇器將其全部匹配，並使用data屬性保存值，並使用jQuery調用代碼。你的代碼應該與標記分開。

例子，假設你想通過單擊鏈接之一更改列表的文本顏色：

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>

$(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 
});

Live Example：

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

。

當然也有可能是例外，你可能有一個很好的理由去這條道路，但它往往是一個代碼味道我說。

來源

2011-12-30 11:23:46 Meligy

不會與html5的onclick氣味？ – Teson 2011-12-30 20:14:17

它的確如此。我只是解釋所有可用的選項。如果我使用標記內的代碼路徑，我會親自使用「href」，但正如我所提到的，我不建議按照這個路徑進行操作。 – Meligy 2011-12-31 01:18:36

將參數嵌入jQuery與html5的正確方法？

回答

相關問題