动态创建按钮的 onclick 函数中的变量

Question

喂，

基本上，我有许多动态生成的列表项，其中包含一个按钮。当我将列表项添加到 ul 列表时，我可以访问在单击列表项中的按钮时要传递的变量。但是当我在下面显示的代码行中添加变量时，它给了我一个Uncaught ReferenceError: challenger is not defined 错误。如何传递这些变量？

JAVASCRIPT：

window.GLOBAL_socket.on('challenged', function(data) {
    console.log("You have been challenged by the player " + data.challenger);
    var challenged = getUrlVars()['user'];
    var challenger = data.challenger;
    $("#challengesList").prepend("<li><div id='newChallenge'><p id='challenge_header'>You have been challenged by: </p><p id='challenge_challenger'>" + data.challenger + 
        "</p><input type='button' value='ACCEPT' id='challenge_accept' onclick='acceptChallenge(challenger)'></input><input type='button' value='DECLINE' " + 
        "id='challenge_decline' onclick='declineChallenge(this)'></div></li>");
});

onclick方法见第6行。

感谢您的回复，

芝诺

Answer 1

之所以没有定义challenger，是因为它是一个局部变量，当你实际点击触发该函数时，是无法全局访问的。

所以不要使用变量，只需将它的实际值放在 onclick 中。

将您的代码更改为：

$("#challengesList").prepend("<li><div id='newChallenge'><p id='challenge_header'>You have been challenged by: </p><p id='challenge_challenger'>" + data.challenger + 
        "</p><input type='button' value='ACCEPT' id='challenge_accept' onclick='acceptChallenge(\""+challenger+"\")'></input><input type='button' value='DECLINE' " + 
        "id='challenge_decline' onclick='declineChallenge(this)'></div></li>");

Answer 2

按照我在 cmets 中提到的那样更改您的代码。

var challenged = [];
var challenger = [];
var counter = 0;

window.GLOBAL_socket.on('challenged', function(data) {
    console.log("You have been challenged by the player " + data.challenger);
    counter++;
    challenged[counter] = getUrlVars()['user'];
    challenger[counter] = data.challenger;

    $("#challengesList").prepend("<li><div id='newChallenge'><p id='challenge_header'>You have been challenged by: </p><p id='challenge_challenger'>" 
        + data.challenger 
        + "</p><input type='button' value='ACCEPT' id='challenge_accept'"

        // change of code --> passing value directly into the function
        + " onclick='acceptChallenge(challenger["+counter+"]

        +")'></input><input type='button' value='DECLINE' " 
        + "id='challenge_decline' onclick='declineChallenge(this)'></div></li>");

});

我刚刚修改了代码，希望它对你有用。告诉我