通过不显眼的 JavaScript 传递变量

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