选择带有类的div，并对单击的div执行操作

Question

我正在尝试用类informationHov单击div并更改div的颜色，并希望其他具有相同类的divs删除颜色。

如何选择没有点击的类相同的div。我的意思是，假设我点击了同一类的第二个div，那么如何选择其他具有相同类的div并对它们做些什么，而不是对第二个div？有$(this).not('.informationHov').css('')吗类似的。。。。谢谢

Answer 1

直接回答问题时，有一个not(this)选项：

$('.test').click(function() {
  $(this).css({
    'color': 'red'
  });
  $('.test').not(this).css({
    'color': 'blue'
  });
});

.test {
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">Test</div>
<div class="test">Test</div>
<div class="test">Test</div>
<div class="test">Test</div>
<div class="test">Test</div>

Answer 2

您可以通过以下方式快速完成此操作：

1. 使用类别informationHov 移除/重置所有div上的颜色

   $('.informationHov').css({color:notClicked});

2. 设置单击的div的颜色：

   $(this).css({color:clicked});

考虑到这一点，您可能最好应用（addClass）/remove（removeClass）一个CSS类，以实现关注点的牢固分离，而不是直接更改Javascript中的样式。

正如您在评论中所指出的，如果您想对其他项目做其他事情，只需将它们全部选中，并使用.not 从该集合中排除当前单击的项目

$('.informationHov').not($(this))

$('.informationHov').on('click', function() {
  $(this).addClass('active');
  $('.informationHov').not(this).each(function() {
    $(this).removeClass('active');
    /// do something to all other elements
  });
});

.informationHov {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  margin: 10px;
  display: inline-block;
}
.active {
  background-color: green
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="informationHov">One</div>
<div class="informationHov">Two</div>
<div class="informationHov">Three</div>

Answer 3

像这样：

$('.informationHov').on('click',function(){
    $(this).addClass('clicked').siblings().removeClass('clicked')
});

.informationHov{
  width:50px;
  height:50px;
  border: 1px solid black
}
.clicked{
    background-color:blue  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="informationHov">One</div>
<div class="informationHov">Two</div>
<div class="informationHov">Three</div>

Answer 4

siblings（）方法返回所选元素的所有同级元素检查此项：http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_traversing_siblings

我为你的问题制造了一把小提琴：http://jsfiddle.net/r4utzkqy/r4utzkqy