jQuery：针对动态属性的选择器不起作用

Question

我正在尝试创建 Fanorona 游戏。 http://canapin.com/web/fanorona

我的一个 jQuery 选择器没有按预期工作。

通过点击蓝色石头然后点击绿色 space 移动蓝色石头后，活动玩家 (var activePlayer) 从 "blue" 变为 "red"。

    $("#board").on("click", "[data-color='"+activePlayer+"']", function(){
    console.log(activePlayer);
    console.log($(this).attr("data-color"));

当主动播放的是"red"并且我点击了一个红色的石头（data-color="red"），它没有任何反应。当我点击蓝色石头时，第一个 console.log 显示 "red"，但第二个显示 "blue"，这让我很困惑，因为我的选择器使用了包含 "red" 的 activePlayer 变量.

有什么想法吗？如果有帮助，这里是完整的 js 代码：http://pastebin.com/7UYks2Z1

Fanorona 规则：https://en.wikipedia.org/wiki/Fanorona

Answer 1

问题是您总是绑定 data-color=blue，因为脚本启动时变量 activePlayer 是 'blue'。

您可以通过为这两种情况绑定一个事件来解决它。像这样：

$("#board").on("click", "[data-color='red']", function(){
        activeStone["x"] = $(this).attr("data-x");
        activeStone["y"] = $(this).attr("data-y");
        checkPossibleMoves(activeStone["x"],activeStone["y"], "red");
    });

     $("#board").on("click", "[data-color='blue']", function(){
        activeStone["x"] = $(this).attr("data-x");
        activeStone["y"] = $(this).attr("data-y");
        checkPossibleMoves(activeStone["x"],activeStone["y"], "blue");
    });

另一种方法是在没有 data-color 属性的情况下进行绑定，并在回调中检索它。

jQuery：针对动态属性的选择器不起作用

jQuery : selector targetting a dynamic attribute not working

jquery

dynamic

selector

custom-data-attribute