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

Question

＆＃13;

＆＃13;

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

＆＃13;

.clicked {
background-color:red;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

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

Answer 1

使用removeClass和not排除当前选择：

＆＃13;

＆＃13;

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

＆＃13;

.clicked {
background-color:red;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

较短的版本：

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

Answer 2

试试这个，

$(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>

Answer 3

从所有其他同级clicked中删除div的课程。

使用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/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>

Answer 4

＆＃13;

＆＃13;

$(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
  });
});

＆＃13;

.clicked {
  background-color: red;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 5

你可以这样做：

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

Answer 6

HI现在尝试这种方式

$(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>