집합 내의 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를 클릭

, 그것은 어느 사업부가 BOX1의 재산을 취할 것입니다 클릭하고 다른 사람이 BOX2 될 것입니다 ..

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

그래서이된다 . 가능한가? 아마도 이런

은

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

이

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

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