在将链接添加到字符串时将数组传递给Javascript onClick函数吗？

Question

我知道这个问题听起来很奇怪，但这确实非常简单。 我有以下功能不起作用：

function start40Counter(counter40_set){console.log(counter40_set);
    var gid = counter40_set[0];
    var seat = counter40_set[1];
    var suits = counter40_set[2];
    var cont = "";
    $.each(suits, function (num, suit) {
        cont += "<a class='suitpick' onClick='pickSuit(counter40_set);'><img src='"+base+"images/someimg.png' title='Odaberi' /></a>";
    });
    $('#game40_picks').html(cont);
}

counter40_set是[10, 3, ["H", "S"]] counter40_set [10, 3, ["H", "S"]] 。 函数失败的部分是：

onClick='pickSuit(counter40_set);'

它说counter40_set is not defined 。 我明白那个。 如果counter40_set是一个简单的字符串而不是一个数组，这甚至都行不通。 如果我尝试onClick='pickSuit("+counter40_set+");' 我收到另一个错误，说H is not defined 。 我也明白了，数组被渲染，JS不知道H和S是什么。

我也尝试过分别传递数组元素（ counter40_set[0]等），但最后一个元素（ ["H", "S"] ）仍然失败。

那么，在这种情况下，如何将这些数据传递给onClick函数？ 除了将整个事情连接成字符串并将其传递给函数外，还必须有一种更优雅的方法？

顺便说一句，这是一个简化的版本。 我真正应该在每次迭代中传递的是[suit, counter40_set]以便每个链接选择不同的suit 。 我问的是简化的问题，因为这足以使我走上正确的道路。

Answer 1

它无法工作，因为上下文丢失，因此未设置“ counter40_set”。

要修复它，只需对onlick使用jquery：

$('#game40_picks').empty(); // get rid of everything
$.each(suits, function (num, suit) {
    var line = $("<a class='suitpick'><img src='"+base+"images/"+cardsuits[suit].img+"' title='Odaberi "+cardsuits[suit].name+"' /></a>");
   line.click(function(ev){
      ev.preventDefault(); // prevent default click handler on "a"
      pickSuit(counter40_set);
   });
   $('#game40_picks').append(line);
});

这样，“ counter40_set”可用于点击功能。

Answer 2

您不应该使用onClick HTML属性。 另外，使用DOM函数构建节点可以节省jQuery解析字符串所花费的时间，但是基本上，以下方法是创建元素并附加click事件监听器，然后将其附加到指定的元素。

function start40Counter(event){console.log(event.data.counter40_set);
    var counter40_set = event.data.counter40_set;
    var gid = counter40_set[0];
    var seat = counter40_set[1];
    var suits = counter40_set[2];
    var cont = "";
    $.each(suits, function (num, suit) {
        var link = document.createElement('a');
        link.className = 'suitpick';
        $(link).on('click', {counter40_set: counter40_set}, start40Counter);

        var img = document.createElement('img');
        img.src= base + "images/" + cardsuits[suit].img;
        img.title = 'Odaberi ' + cardsuits[suit].name;

        link.appendChild(img);
        $('#game40_picks').append(link);
    });
}

未经测试，但可能开箱即用。