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>

所以..无论点击哪个div都会获取box1的属性，其他的将成为box2。有可能吗？

Answer 1

使用toggleClass()方法的另一种可能解决方案：

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

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

Answer 2

或许这样的事情：

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

对于所有框都有一个box类，添加和删除一个active类可能比较简洁，后一个类可以覆盖前者的属性。可以省去切换两个不同类的麻烦。

Answer 3

试试这个

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