Question

我在一个网站上工作，可以在不同大小的板上玩游戏。我正在for循环中创建它，除了更改和删除Click侦听器中的类之外，它以我想要的方式工作。应该发生的是应该删除“空”类，然后添加“黑色”或“白色”，然后将应用适当的CSS。我添加了console.log（）语句，并且达到了我的期望，但是该类保持不变（addClass和removeClass都不执行任何操作）。我添加return false是因为我看到了另一个问题的建议，但是它似乎没有任何作用。我想念什么？

for(var i = 0; i < dim; i++) { // x
  for(var j = 0; j < dim; j++) { // y
    board.append('<circle id="'+ id +'" class="empty" cx="'+ (start+gap*j) +'" cy="'+ (start+gap*i) +'" r="'+ (radius) +'"/>');

    $(document).on('click', '#'+id, function() {
      console.log("clicked with color " + color);
      console.log(this);
      $(this).removeClass("empty");
      $(this).addClass(color); // I also have tried this with just "white" or "black" instead of a variable
      console.log(this);
      return false; 
    });

    id++;
  }
}

当我单击ID = 0的圆圈时记录了什么：

<circle id="0" class="empty" cx="8" cy="8" r="4.75">
<circle id="0" class="empty" cx="8" cy="8" r="4.75">

这是相关的CSS：

circle.empty {
  stroke: none;
  fill-opacity: 0;
}

circle.white {
  stroke: black;
  fill: white;
  fill-opacity: 1;
}

circle.black {
  stroke: black;
  fill: black;
  fill-opacity: 1;
}

Answer 1

请勿在for循环内使用click函数，而应像下面这样使用通用类ID来代替.circle，

$(document).on('click', '.circle', function() {
  $(this).removeClass("empty");
  $(this).addClass('red');
  console.log(`${$(this).attr('id')} - ${$(this).attr('class')}`);
});

for(var j = 0; j < 5; j++) {
   $('#wrapper').append(`<div id="${j}" class="circle empty">Click Me</div>`);    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper"></div>

Answer 2

我的英语根本不好。

您不能在圆上写相同的“ id”属性。当您单击圆圈时，它不起作用。

然后像这样改变。

$(document).on('click', '.'+id, function() {
   // some logic here
});

jQuery removeClass和addClass

2 个答案: