addclass not working jquery
Question
I have two divs, one is green, and the other is red. They have classes of "green" and "red" respectively. When I use the addClass() function (triggered by clicking on the div), the new class is added, and the div changes color. However, when I click on it again right after, the new class isn't added and the div doesn't change color.
However, when I click on the other div right below the other one, it works and the classes are updated.
my HTML code:
<!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>
my css code:
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;
}
my Javascript code:
$(document).ready(function(){
$(".green").click(function(){
$(".green").addClass("red");
$(".green").removeClass("green");
});
$(".red").click(function(){
$(".red").addClass("green");
$(".red").removeClass("red");
});
});
4 answers
solution1
2 2018-02-19 20:16:15
You should have some common class on which you should bind this .click and on click just toggle both the classes 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>
solution2
0 2018-02-19 20:16:02
It is because this element was not red when you registered the listeners. You should delegate the event. (Register to the parent and check event.target ). Read more here: http://api.jquery.com/on/#direct-and-delegated-events
solution3
0 2018-02-19 20:26:19
When you call a jQuery selector it selects the matched elements at the time the selection is made, and is unaffected by any change to the selected/unselected elements after.
Now if you want an event handler to fire based on selectors in real time you'll have to use event delegation.
Which is basically attach the handler to a element that will contain all the elements you want to possible select.
Also I made some modification to the code I'm not sure how you wanted it to work.
$(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>
solution4
-1 2018-02-19 20:17:15
When you execute a selector, such as $(".red") , it only finds the elements in the DOM that match that selector at that point in time . It will not find future elements that match. If you want to bind so that it will work for any element that will match in the future, you will need to change your bindings to be delegate event bindings .
$(document.body).on("click", ".green", function(){
$(".green").addClass("red");
$(".green").removeClass("green");
});
$(document.body).on("click", ".red", function(){
$(".red").addClass("green");
$(".red").removeClass("red");
});
What this does is binds on a pre-existing parent of the elements, in this case document.body , and when a click event bubbles up to it, it checks to see if it originated from a child that matches the child selector (.red or .green in this case). If it matches, it processes the event logic on the child.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.