javascript - 在集合中更改 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>

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

score 4 · Accepted Answer

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

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

演示：http: //jsfiddle.net/x8vxh/

score 2 · Accepted Answer

可能是这样的：

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

box为所有框设置一个类，添加和删除一个类可能会更整洁，active而后一个类可以覆盖前者的属性。可以省去切换两个不同课程的麻烦。

score 0 · Accepted Answer

尝试这个

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

3 回答 3