addclass不工作jQuery答案

【问题标题】：addclass not working jqueryaddclass不工作jQuery
【发布时间】：2018-02-19 20:12:42
【问题描述】：

我有两个 div，一个是绿色的，另一个是红色的。它们分别具有“绿色”和“红色”类。当我使用 addClass() 函数（通过单击 div 触发）时，会添加新类，并且 div 会改变颜色。但是，当我立即再次单击它时，不会添加新类并且 div 不会改变颜色。

但是，当我单击另一个 div 正下方的另一个 div 时，它可以工作并且类会更新。

我的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script type="text/javascript" src="javascript/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="javascript/main.js"></script>
</head>
<body>

<div class="red">
</div>
<div class="green">
</div>

</body>
</html>

我的css代码：

 body{
    margin:0;
    padding:0;
}

    .green{
        width:100%;
        height:8vh;
        position:relative;
        background-color:green;
        margin:auto;
    }


    .red{
        width:100%;
        height:8vh;
        position:relative;
        background-color:red;
        margin:auto;
    }

我的 Javascript 代码：

$(document).ready(function(){
$(".green").click(function(){
    $(".green").addClass("red");
    $(".green").removeClass("green");
});

$(".red").click(function(){
    $(".red").addClass("green");
    $(".red").removeClass("red");
});

});

【问题讨论】：

因为当您添加类时，其他单击选择器不会神奇地连接起来。两次点击事件确实没有理由。使用切换类

标签： javascript jquery html css

【解决方案1】：

你应该有一些你应该绑定这个.click的通用类，点击时只需切换两个类red green

$(".changeClass").click(function(){
    $(this).toggleClass("red green");
});

 body{
    margin:0;
    padding:0;
}

    .green{
        width:100%;
        height:8vh;
        position:relative;
        background-color:green;
        margin:auto;
    }


    .red{
        width:100%;
        height:8vh;
        position:relative;
        background-color:red;
        margin:auto;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="red changeClass">
</div>
<div class="green changeClass">
</div>

【讨论】：

【解决方案2】：

这是因为你注册监听器时这个元素不是red。您应该委托该事件。（向家长注册并检查event.target）。在这里阅读更多：http://api.jquery.com/on/#direct-and-delegated-events

【讨论】：

【解决方案3】：

当您执行一个选择器时，例如$(".red")，它只会在 DOM 中找到匹配该选择器的元素在那个时间点。它不会找到匹配的未来元素。如果您想绑定以便它适用于将来匹配的任何元素，您需要将绑定更改为委托事件绑定。

$(document.body).on("click", ".green", function(){
    $(".green").addClass("red");
    $(".green").removeClass("green");
});

$(document.body).on("click", ".red", function(){
    $(".red").addClass("green");
    $(".red").removeClass("red");
});

它的作用是绑定元素的预先存在的父元素，在本例中为 document.body，当点击事件冒泡到它时，它会检查它是否来自与子选择器匹配的子选择器（在本例中为 .red 或 .green）。如果匹配，则处理子节点上的事件逻辑。

【讨论】：

【解决方案4】：

当您调用 jQuery 选择器时，它会在进行选择时选择匹配的元素，并且不受之后对选定/未选定元素的任何更改的影响。
现在，如果您希望基于选择器实时触发事件处理程序，则必须使用事件委托。
这基本上是将处理程序附加到一个元素，该元素将包含您想要选择的所有元素。
我还对代码做了一些修改，我不确定你希望它如何工作。

$(document).ready(function(){
      $("body").on("click", ".green", function(){
        $(this).addClass("red").removeClass("green");
      });
    
      $("body").on("click", ".red", function(){
        $(this).addClass("green").removeClass("red");
      });
    
});

body{
    margin:0;
    padding:0;
}

    .green{
        width:100%;
        height:8vh;
        position:relative;
        background-color:green;
        margin:auto;
    }


    .red{
        width:100%;
        height:8vh;
        position:relative;
        background-color:red;
        margin:auto;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="red">
</div>
<div class="green">
</div>

【讨论】：