Question

我想将变量从按钮传递给事件处理程序，但我不知道这是怎样的正确方法。第x行和第y行都不好。但我需要这样的东西。

在html头

window.onload = function()
{
    var myButton = document.getElementsByTagName("button");

    for (var i = 0; i < myButton.length; i++)
    {
        myButton[i].onclick = function()        // <-- line x
        {                
            alert(myButton[i].data1);           // <-- line y
        }
    }
}

在html正文中

<button type = "button" data1 = "John" data2 = "52">Click Me</button>
<button type = "button" data1 = "Peter" data2 = "26">Click Me</button>
<button type = "button" data1 = "Mary" data2 = "44">Click Me</button>

Answer 1

看看我刚刚放在一起的这个JSFiddle示例：http://jsfiddle.net/BshLK/1/

您的代码示例的问题是，在事件处理程序运行时，i未定义，因为它在循环运行时只有它的值。要更正它，首先需要访问您调用事件的元素，然后需要使用getAttribute()来获取属性值。

Answer 2

从你的onload事件我猜你没有使用jquery，但如果你不介意jquery我会看看data（）方法。你可以做像

这样的事情

$(function(){
    $("#button1").data("name", "value"); //your example would pass ("data","abcdefg");
    //Click handler.
    $("#button1").click(function(o,e){
         alert(o.data("name")); // alerts out "value"
    }
}

然后，您可以使用该元素的选择器访问该数据。

Link to the documentation

通过不引人注目的JavaScript传递变量

2 个答案: