javascript - 添加和删​​除类

Question

我有一个使用 bootstrap 的基本 HTML，container > row > col > div ID > panel 按此顺序，该类放在 div ID 中，问题是我需要从该 DIV 中删除该类并将其放入另一个 DIV(您单击的那个)，我知道如何检查该类是否存在于 div 内的任何 div 中，但我不知道如何从那里删除它并将其添加到另一个。

我做了一个Fiddle来说明这个问题。当您加载页面时，该类已经存在。如果您单击任何一个框，它会提醒您该类实际上存在但不知道哪个 div 拥有它。这个想法是从可能存在的 whaveter 中删除该类，并将其添加到您单击的 div 中。

HTML

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <div id="s1">
            <div class="panel panel-default">
                  <div class="panel-heading">1</div>
                  <div class="panel-body">1</div>
            </div>
            </div>
        </div>
     <div class="col-sm-3">
         <div id="s2" class="selection">
            <div class="panel panel-default">
                  <div class="panel-heading">2</div>
                  <div class="panel-body">2</div>
            </div>
         </div>
        </div>
        <div class="col-sm-3">
            <div id="s3">
            <div class="panel panel-default">
                  <div class="panel-heading">3</div>
                  <div class="panel-body">3</div>
            </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div id="s4">
            <div class="panel panel-default">
                  <div class="panel-heading">4</div>
                  <div class="panel-body">4</div>
            </div>
            </div>
        </div>
        </div>
    </div>

JS

$("#s1").click(function() {
    if($(".selection")[0]) {
        alert('Class exist');
        $(".selection")[0].removeClass('.selection');
    }
});
$("#s2").click(function() {
    if($(".selection")[0]) {
        alert('Class exist');
        $(".selection")[0].removeClass('.selection');
    }
});
$("#s3").click(function() {
    if($(".selection")[0]) {
        alert('Class exist');
        $(".selection")[0].removeClass('.selection');
    }
});
$("#s4").click(function() {
    if($(".selection")[0]) {
        alert('Class exist');
        $(".selection")[0].removeClass('.selection');
    }
});

Answer 1

您可以将代码缩减为:

$("#s1,#s2,#s3,#s4").click(function () {
    $(".selection").removeClass('selection');
    $(this).addClass('selection');
});

jsFiddle example

在你的例子中:

• $(".selection")[0].removeClass('.selection'); 不需要 [0] 并且不应该有句号你传递给 removeClass() 的类
• 您使用 $(this)
引用您点击的 div
• 只要选择类存在于某处，if($(".selection")[0]) { 将始终为真，因此将其用作一个条件。