不带函数参数的低调javascript

如果你有

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

基准面1

而您希望延迟绑定：

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

基准面1
$（“#数据”）。单击（函数（）{
handleData（1）；
})

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

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

基准面1
$（“#数据”）。单击（函数（）{
handleData（$（this.attr（“数据”）；）；
})

您的最后一种方法几乎是正确的。您应该使用

data

属性作为前缀，格式为

datasomeproperty

。然后您可以通过

$（this.data（“someproperty”）

或

$（this.attr（“data someproperty”）

访问它

---

编辑：阅读：。

我假设您使用的是jQuery

如果是这样，我会利用jQuery对HTML5

data-

属性的支持，使用该方法。它将在所有浏览器中运行

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

基准面1
$（“#数据”）。单击（函数（）{
handleData（$（this）.data（“数字”）；
})

请注意，我将属性更改为

数据编号

，并使用

.data（“编号”）

访问它。这需要

jQuery 1.4.3

或更高版本

来自文档：

从jQuery1.4.3HTML5数据开始，属性将自动拉入jQuery的数据对象

---

假设有多个数据元素，是的，您必须以其他方式传递该参数。但是，它不必在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>

1
二
三
$（'.data'）.each（函数（ix）{$（this）.click（函数（）{handleData（ix）}）}）；

---

这有点滥用文档排序，但它非常低调。

您不能直接将图1放在函数的括号中吗？您是否预期div#data可能会在另一个场景中使用不同的参数调用该函数？我可以，但内联javascript并不是非常不引人注目。如果我在一个表中有几个基准，我希望在文档完成后将点击绑定到底部脚本中。值得一提的是，标记中的所有数据属性都必须是小写（在Chrome中测试）。