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调用代码。您的代码应与标记分开。

示例，假设您要通过单击其中一个链接来更改列表文本的颜色：

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>

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

直播示例：

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

当然可能有例外，你可能有充分的理由走这条路，但这通常是我要说的代码味道。

使用html5将参数嵌入jQuery的正确方法？

3 个答案: