Question

我尝试了类似问题的所有解决方案，但似乎没有任何效果。请帮帮我。目标是更改单击的div的颜色，并且仅更改该div的颜色。我的代码改变了每个div的颜色。

这是JSFiddle DEMO。如果有解释为什么会发生这种情况会很酷。

JQuery的

// This is the clicking part.
$('div').click(function() {
  $(this).children('div').css("background", "blue");
});

// The part below creates the boxes.
$("#createBtn").click(function() {
  createBoxes();
  createGrid();
});

$('#test').click(function() {
  alert($("#numBox").val());
  //$(this).hide();
});

var boxes = [];

function createBoxes() {
  boxes = [];
  var numBox = $("#numBox").val();
  for (var i = 1; i <= numBox; i++) {
    boxes.push(i);
    boxes.push(i);
  }
}

function createGrid() {
  $("#grid").html("");
  var x = shuffleArray(boxes);
  for (i = 0; i < x.length; i++) {
    var box = "<div id='box" + i + "' class='box'>" + x[i] + "</div>";
    $("#grid").append(box);
  }
}

function shuffleArray(array) {
  for (var i = array.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
  return array;
}

HTML

Boxes: 
<select id="numBox">
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
</select>
<button id="createBtn">Create</button>
<button id="test">Test</button>

<div id="grid">
</div>

CSS

#grid {
  height:300px; 
  width:236px;
  background:green; 
  padding:10px;
}

.box {
  height:50px; 
  width:50px; 
  background:red;
  float:left; 
  margin:2px;
  display:block;
}

Answer 1

使用on()绑定click事件。

$(document).on('click','.box',function() {
    $(this).css("background", "blue");
});

工作演示 https://jsfiddle.net/ukukgx8v/17/

Answer 2

你正在改变你所有的孩子。只需更改event.target：

$('div').click(function(event) {
    $(event.target).css("background", "blue");

}）;

JSFiddle：https://jsfiddle.net/ukukgx8v/15/

Answer 3

删除它：

// This is the clicking part.
$('div').click(function() {
  $(this).children('div').css("background", "blue");
});

并将此作为第一个命令添加到＆＃34; createGrid＆＃34;：

$('.box').unbind('click');

将此作为最后一个命令添加到同一个函数＆＃34; createGrid＆＃34;：

// This is the clicking part.
$('.box').click(function() {
  $(this).css("background", "blue");
});

工作示例：https://jsfiddle.net/ukukgx8v/13/

Answer 4

您可以通过添加

来更改createGrid功能

  $('#grid div.box').click(function() {
    $(this).css("background", "blue");
});

试试这个

＆＃13;

$("#createBtn").click(function() {
  createBoxes();
  createGrid();
});

$('#test').click(function() {
  alert($("#numBox").val());
  //$(this).hide();
});

var boxes = [];

function createBoxes() {
  boxes = [];
  var numBox = $("#numBox").val();
  for (var i = 1; i <= numBox; i++) {
    boxes.push(i);
    boxes.push(i);
  }
}

function createGrid() {
  $("#grid").html("");
  var x = shuffleArray(boxes);
  for (i = 0; i < x.length; i++) {
    var box = "<div id='box" + i + "' class='box'>" + x[i] + "</div>";
    $("#grid").append(box);
  }
  $('#grid div.box').click(function() {
	$(this).css("background", "blue");
});
}

function shuffleArray(array) {
  for (var i = array.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
  return array;
}

＆＃13;

#grid {
  height:300px; 
  width:236px;
  background:green; 
  padding:10px;
}
 
.box {
  height:50px; 
  width:50px; 
  background:red;
  float:left; 
  margin:2px;
  display:block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Boxes: 
<select id="numBox">
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
</select>
<button id="createBtn">Create</button>
<button id="test">Test</button>

<div id="grid">
</div>

＆＃13;

关于特定嵌套div更改css的JQuery .click（）不起作用

4 个答案: