Question

我有3个具有相同类的div（我不能在它们上使用ID）。我通过瞄准他们的班级找到所有这些，然后 - 点击 - 我想应用一些东西（例如更改背景颜色）。我只是设法改变了所有这些，但不仅仅是我实际点击的那个。我错过了什么？

var thisDiv = $('.thisDiv');

thisDiv.click(function() {
  var i = thisDiv.index(this);

  console.log(i);
  console.log(thisDiv.css('background-color'));

  // this changes all of the div, not only the clicked one
  thisDiv.css('background-color', 'red');

  // console msg for the code below: Uncaught TypeError: thisDiv[i].css is not a function
  // thisDiv[i].css('background-color', 'red');

  // i also tried these, which didn't work...
  //console.log(thisDiv[i].css('background-color'));
  //console.log(thisDiv.eq[i].css('background-color'));
});

.thisDiv{width:50px;height:50px;background-color:lightgrey;float:left;margin:15px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="thisDiv">div 0</div>
<div class="thisDiv">div 1</div>
<div class="thisDiv">div 2</div>

Answer 1

使用$(this)将为您提供已点击的div

  $(this).css('background-color', 'red');

Answer 2

使用.eq()：

thisDiv.eq(i)

由于thisDiv是一组对象，您可以使用$(this)或.eq(i)获取具体的对象。

＆＃13;

var thisDiv = $('.thisDiv');

thisDiv.click(function() {
  var i = thisDiv.index(this);
  thisDiv.eq(i).css('background-color', 'red');
});

＆＃13;

.thisDiv {
  width: 50px;
  height: 50px;
  background-color: lightgrey;
  float: left;
  margin: 15px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="thisDiv">div 0</div>
<div class="thisDiv">div 1</div>
<div class="thisDiv">div 2</div>

＆＃13;

单击并更改此div

2 个答案: