使用切换类时，如何只使一个div切换一次？

$(document).ready(function(){
  $("#items").children().click(function(){
    $(this).toggleClass('clicked');
  });
});

.clicked {
background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='items'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Now, I can toggleClass to make div become red color when click. But I can still click another div to make it red then I will have two div in red color.

现在，我可以通过toggleClass使div在点击时变成红色。但是我仍然可以点击另一个div使其成为红色然后我将有两个红色div。

How to only make one div become red at one time?

如何只让一个div一次变成红色？

6 个解决方案

#1

Try this,

尝试这个，

$(document).ready(function(){
    $("#items").children().click(function(){
        $(this).toggleClass('clicked') // toggle class of current element
               .siblings('div') // get siblings of current elem
               .removeClass('clicked'); // remove class clicked from siblings

    });
});

$(document).ready(function() {
  $("#items").children().click(function() {
     $(this).toggleClass('clicked').siblings('div').removeClass('clicked');
  });
});

.clicked {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='items'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

#2

Remove the class of clicked from all the other sibling divs.

从所有其他兄弟div中删除单击的类。

Use siblings() to select the sibling elements.

使用siblings（）选择兄弟元素。

Get the siblings of each element in the set of matched elements, optionally filtered by a selector.

获取匹配元素集中每个元素的兄弟元素，可选择通过选择器进行过滤。

$(document).ready(function() {
  $("#items").children().click(function() {
    $(this).toggleClass('clicked').siblings('div').removeClass('clicked');
  });
});

.clicked {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='items'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

#3

$(document).ready(function() {
  $("#items").children().click(function() {
    $(this) //clicked element
        .add('.clicked', this.parentNode)//add already '.clicked' child element in jq set
        .toggleClass('clicked');//toggle class for all elements in set
  });
});

.clicked {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='items'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

#4

Use removeClass and not to exclude the current selection:

使用removeClass而不是排除当前选择：

$(document).ready(function(){
  $("#items").children().click(function(){
    $('#items > div').not($(this).toggleClass('clicked')).removeClass('clicked');
  });
});

.clicked {
background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='items'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

A shorter version:

$(document).ready(function(){
  $("#items").children().click(function(){
    $('.clicked').not($(this).toggleClass('clicked')).removeClass('clicked');
  });
});

#5

You can do:

你可以做：

$(document).ready(function(){
  $("#items").children().click(function(){
    $(this).siblings().removeClass('clicked');
    $(this).addClass('clicked');
  });
});

#6

HI now try to this way

我现在尝试这种方式

$(document).ready(function(){
      $("#items > div").click(function(){
       $("#items").children().removeClass('clicked');
        $(this).addClass('clicked');
      });
    });

$(document).ready(function(){
  $("#items > div").click(function(){
   $("#items").children().removeClass('clicked');
    $(this).addClass('clicked');
  });
});

.clicked {
background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='items'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>