addclass不起作用的jQuery
[英]addclass not working jquery
問題描述
我有兩個div，一個是綠色，另一個是紅色。 它們分別具有“綠色”和“紅色”類別。 當我使用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");
});
});
4 個解決方案
解決方案1
2 2018-02-19 20:16:15
您應該具有一些通用類，可以在其上綁定此.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
0 2018-02-19 20:16:02
這是因為注冊偵聽器時此元素不是red 。 您應該委派活動。 （注冊到父級並檢查event.target ）。 在此處了解更多信息： http : //api.jquery.com/on/#direct-and-delegated-events
解決方案3
0 2018-02-19 20:26:19
當您調用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>
解決方案4
-1 2018-02-19 20:17:15
當執行選擇器時，例如$(".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 addClass在頁面加載時不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.