Javascript 添加和删除类

我有一个使用引导的基本HTML，容器>行>列>div ID>面板，按顺序，类被放置在div ID中，问题是我需要从该div中删除该类并将其放置在另一个div中（您单击的那个div），我知道如何检查该类是否存在于一个div中的任何div中，但我不知道如何从那里删除它并将其添加到另一个div中

我已经做了一个例子来说明这个问题。加载页面时，类已经存在。如果您单击任何一个框，它会提醒您该类实际上存在，但不知道哪个div拥有它。其想法是从whaveer中删除该类，并将其添加到您单击的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>

这样做：

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

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

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

查看这些内容以了解更多信息：，

按如下方式操作：

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

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

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

---

查看这些内容以了解更多信息：，

您可以将代码缩减为：

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

在您的示例中：

• $（“.selection”）[0].removeClass（“.selection”）

  不需要

  [0]

  ，并且传递给removeClass（）的类中不应该有句点
• 您使用

  $（this）

• 只要selection类存在于某个地方，

  if（$（“.selection”）[0]）{

  将始终为真，因此将其用作条件没有意义

---

您可以将代码缩减为：

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

在您的示例中：

• $（“.selection”）[0]。removeClass（“.selection”）；

  不需要

  [0]

  ，并且传递给removeClass（）的类中不应该有句点
• 您使用

  $（this）

• 只要selection类存在于某个地方，

  if（$（“.selection”）[0]）{

  将始终为真，因此将其用作条件没有意义

---

以下是实现您所需的方法。我对您的代码所做的是
HTML
JQUERY

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

注意，我刚刚在面板的每个父div中添加了一个简单的类，名为“divs”
我在这里所做的是首先获得用户单击的面板的父div的id。然后我从父divs“s1 s2 s3 s4”中删除了类“selection”，并在公共类“divs”的帮助下访问它。然后我添加了类“选择”到已单击的div
这是你的参考资料

---

注意：此代码适用于您创建的任意数量的面板。
以下是实现所需功能的方法。我对您的代码所做的是
HTML
JQUERY

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

注意，我刚刚在面板的每个父div中添加了一个简单的类，名为“divs”
我在这里所做的是首先获得用户单击的面板的父div的id。然后我从父divs“s1 s2 s3 s4”中删除了类“selection”，并借助公共类“divs”访问它。然后我添加了类选择“到已单击的div
这是你的参考资料

---

注意：此代码适用于您创建的任意数量的面板。
我没有否决投票，实际上我只是在看小提琴，它正以我需要的方式工作……谢谢……我没有否决投票，实际上我只是在看小提琴，它正以我需要的方式工作……谢谢……我倾向于写更多的东西，坏习惯a第二种喝咖啡的方式…谢谢royhowie我倾向于写更多的东西，坏习惯和喝咖啡的方式…谢谢royhowie