Question

我有两个div，一个是绿色，另一个是红色。他们有＆＃34;绿色＆＃34;和＆＃34;红色＆＃34;分别。当我使用addClass（）函数（通过单击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");
});

});

Answer 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>

Answer 2

这是因为当您注册侦听器时，此元素不是red。您应该委派该活动。（注册父母并检查event.target）。在此处阅读更多内容：http://api.jquery.com/on/#direct-and-delegated-events

Answer 3

调用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>

Answer 4

当您执行选择器（例如$(".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）。如果匹配，则处理子项上的事件逻辑。

addclass不工作jquery

4 个答案: