集內更改div類

Question

我有以下的HTML，我想改變onclick的div。例如：

初始

<div class="box1">Story 1</div> 
<div class="box2">Story 2</div> 
<div class="box2">Story 3</div> 
<div class="box2">Story 4</div> 

當我點擊總動員2，它成爲

<div class="box2">Story 1</div> 
<div class="box1">Story 2</div> 
<div class="box2">Story 3</div> 
<div class="box2">Story 4</div> 

所以..點擊哪個格將採取BOX1的財產，其他人將成爲BOX2 。可能嗎？

Answer 1

像這樣的東西可能：

$('.box1, .box2').click(function() { 
    $('.box1').addClass('box2').removeClass('box1'); 
    $(this).addClass('box1').removeClass('box2'); 
}); 

這可能是整潔，以對所有箱子一個box類，以及一個active類，添加和刪除，而後者類可以覆蓋前者的屬性。會爲您節省切換兩個不同課程的麻煩。與toggleClass()方法

Answer 2

還有一個可能的解決方案：

$("div").on("click", function() { 
    $(this) 
     .siblings(".box1") 
     .andSelf() 
     .toggleClass("box1 box2"); 
}); 

DEMO：http://jsfiddle.net/x8vxh/

Answer 3

嘗試在E本

$("div").on("click",function(){ 
    $(".box1").prop("class","box2"); 
    $(this).prop("class","box1"); 
}); 

http://jsbin.com/igugop/3/edit