Question

如果你有

<div id="data" onclick="handleData(1)">Datum 1</div>

而你想要迟到绑定：

<div id="data">Datum 1</div>
<script>
    $("#data").click(function() {
        handleData(1);
    })
</script>

你如何传递参数1？你必须做这样的事情：

<div id="data" data="1">Datum 1</div>
<script>
    $("#data").click(function() {
        handleData($(this).attr("data"););
    })
</script>

Answer 1

我假设您正在使用jQuery。

如果是这样，我将利用jQuery对使用data()^(docs)方法的HTML5 data-属性的支持。它将在所有浏览器中使用。

<div id="data" data-number="1">Datum 1</div>
<script>
    $("#data").click(function() {
        handleData($(this).data("number"));
    })
</script>

请注意，我已将该属性更改为data-number，并使用.data("number")访问该属性。这需要jQuery 1.4.3或更晚。

来自文档：

从jQuery 1.4.3开始，HTML 5数据属性将自动引入jQuery的数据对象。

Answer 2

你的最后一种方法几乎是正确的。您应该使用data属性作为data-someproperty形式的前缀。然后，您可以通过$(this).data("someproperty")或$(this).attr("data-someproperty")访问它。

修改：阅读：jQuery.data()。

Answer 3

假设有多个数据元素，是的，您必须以其他方式传递该参数。它不一定在HTML中：

<div class="data">one</div>
<div class="data">two</div>
<div class="data">three</div>

<script>
    $('.data').each(function(ix){$(this).click(function(){handleData(ix)})});
</script>

这有点滥用文档排序，但它非常不引人注目。

没有功能参数的不显眼的javascript

3 个答案: