使用切換類時如何僅使一個div一次切換？

Question

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

現在，我可以切換類以使div在單擊時變為紅色。 但是我仍然可以單擊另一個div使其變為紅色，然后將有兩個紅色的div。

如何只使一個div一次變紅？

Answer 1

使用removeClass而not排除當前選擇：

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

較短的版本：

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

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

Answer 5

你可以做：

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

Answer 6

嗨，現在嘗試這種方式

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