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"]]。失败的功能部分是：

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”。

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

$('#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);
});

这样“click40_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);
    });
}

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

将数组传递给Javascript onClick函数，同时将链接添加到字符串中？

2 个答案: