Javascript addclass无法使用jquery_Javascript_Jquery_Html_Css

Javascript addclass无法使用jquery

javascript jquery html css

Javascript addclass无法使用jquery,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有两个div，一个是绿色的，另一个是红色的。他们分别有“绿色”和“红色”两类。当我使用addClass（）函数（通过单击div触发）时，会添加新类，div会改变颜色。然而，当我再次点击它之后，新类不会被添加，div也不会改变颜色但是，当我单击另一个div正下方的另一个div时，它会工作，并且类会更新我的HTML代码： <!DOCTYPE html> <html> <head> <title></title> <

我有两个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>

我的Javascript代码：

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

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

});

这是因为当您注册侦听器时，此元素不是红色的。你应该委派活动。（注册到父级并选中

事件目标）。在此处阅读更多信息：
您应该有一些公共类，您应该在这些类上绑定此。单击，然后单击只需切换两个类红-绿


$（“.changeClass”）。单击（函数（）{
$（此）.toggleClass（“红-绿”）；
});
正文{
保证金：0；
填充：0；
}
格林先生{
宽度：100%；
高度：8vh；
位置：相对位置；
背景颜色：绿色；
保证金：自动；
}
瑞德先生{
宽度：100%；
高度：8vh；
位置：相对位置；
背景色：红色；
保证金：自动；
}
当执行选择器时，例如$（“.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）。如果匹配，它将处理子级上的事件逻辑。
当您调用jQuery选择器时，它会在进行选择时选择匹配的元素，并且不受之后对选定/未选定元素的任何更改的影响。

现在，如果您希望基于选择器实时触发事件处理程序，则必须使用事件委派。

这基本上是将处理程序附加到一个元素，该元素将包含您想要选择的所有元素。

我还对代码做了一些修改，我不确定您希望它如何工作

$（文档）.ready（函数（）{
$（“正文”）。在（“单击“，”.green），函数（）上{
$（此）.addClass（“红色”）.removeClass（“绿色”）；
});
$（“正文”）。在（“单击“，”.red“，函数（）上）{
$（此）.addClass（“绿色”）.removeClass（“红色”）；
});
});
正文{
保证金：0；
填充：0；
}
格林先生{
宽度：100%；
高度：8vh；
位置：相对位置；
背景颜色：绿色；
保证金：自动；
}
瑞德先生{
宽度：100%；
高度：8vh；
位置：相对位置；
背景色：红色；
保证金：自动；
}
因为添加类时，另一个单击选择器不会神奇地连接起来。真的没有理由有两次点击事件。使用toggleClass
$(document.body).on("click", ".green", function(){
    $(".green").addClass("red");
    $(".green").removeClass("green");
});

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