Question

我有两个或更多个div，第一个被选中。当我单击另一个div时，该div将被选中。我是用背景色做的。

CSS：

.red {background: red}

HTML：

<div class="foo">...</div>
<div class="foo">...</div>
<div class="foo">...</div>

JavaScript的：

$('.foo').click(function(){
 //$(this).toggleClass('red') Not ideal as the active div must always be red
 // If selected, remove all red classes then add class?
});

由于它是一个事件点击，我不确定如何删除所有其他红色类并将红色类添加到单击的div。

简而言之，＆＃34;突出显示＆＃34;选择div后，如果页面被刷新，则第一个div应该具有红色背景，因为选择了div。

Answer 1

你想要这样吗？

$("#root").bind("click",function(e){
    $("#root").find(".foo").removeClass("red");
    $(e.target).addClass("red");
})

.red {background: red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="root">
  <div class="foo red">...</div>
  <div class="foo">...</div>
  <div class="foo">...</div>
</div>

Answer 2

使用siblings()方法获取同级元素并从中删除red类。

$('.foo').click(function() {
  $(this).addClass('red') // add class to clicked element
    .siblings() // get siblings
    .removeClass('red'); // remove class from sibling elements 
});

＆＃13;

$('.foo').click(function() {
  $(this).toggleClass('red')
    .siblings().removeClass('red')
});

＆＃13;

.red {
  background: red
}

＆＃13;

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

＆＃13;

Answer 3

以下是您想要的JS

$('.sample').click(function() {
  $(this).addClass('addColor')
    .siblings().removeClass('addColor')
});

See this fiddle

突出显示所选的Div

3 个答案: