Question

我有一个使用bootstrap的基本HTML，容器＆gt;行＆gt; col＆gt; div ID＆gt;按顺序放置面板，该类放在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)
只要选择类存在于某处，if($(".selection")[0]) {将始终为真，因此将其用作条件并不合理。

Answer 2

这是实现您所需要的方法。我对你的代码所做的是

HTML

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <div id="s1" class="divs">
            <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 divs">
            <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" class="divs">
            <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" class="divs">
            <div class="panel panel-default">
                  <div class="panel-heading">4</div>
                  <div class="panel-body">4</div>
            </div>
            </div>
        </div>
        </div>
    </div>

CSS

.container {
    max-width:400px;
}
#s1:hover, #s2:hover, #s3:hover, #s4:hover {
    border: 1px solid black;
    cursor: pointer;
}
.selection {
    background-color: black;
    padding:15px;
}

JQUERY

$(document).ready(function(){
    $(".panel").on("click",function(){
        var divid="#"+$(this).parent().attr("id");
        $(".divs").removeClass("selection");
        $(divid).addClass("selection");
    });
});

请注意，我刚刚为面板的每个父div添加了一个简单的类＆＃34; divs＆＃34; 。

我在这里做的是我首先获得了用户点击的面板父div的id。然后我从父div ＆＃34; s1 s2 s3 s4＆＃34; 中移除了＆＃34;选择＆＃34; ，并借助于普通班级＆＃34; divs＆＃34; 。然后我将课程＆＃34;选择＆＃34; 添加到已点击的div中。

以下是DEMO供您参考。

注意：此代码适用于您创建的任意数量的面板。

Answer 3

这样做：

$("#s1").click(function() {

    // Check class on the clicked section
    if($(this).hasClass('selection') ) {
        alert('Class exist');

        // class found then remove it.
        $(this).removeClass('.selection');
    }
});

了解更多信息：.hasClass()，.addClass()，.removeClass()

添加和删除类

3 个答案:

添加和删​​除类

3 个答案:

添加和删除类