jQuery animate() does not work with If-Else Statement
Question
JQuery beginner here. I'm trying to get a group of divs to change from red to blue when I click on them. When I click them again, I want the divs to change back to red. I tried using jQuery's animate() method (with the jQuery color plugin) to change the div's color. However, the code below only partially works.
$(document).ready(function(){
$("div").click(function() {
$("div").each(function() {
if (this.style.color !== "blue") {
$(this).animate({
color:'blue'
},1000);
} else {
this.style.color = "red";
}
});
});
});
When I click a div, the if statement works fine. The divs change to blue. However, when I click a div again, the divs don't change back to red. The else statement doesn't seem to work. Any ideas on my mistake? The else statement works when I replace $(this).animate({...}) with this.style.color = "blue"; which so I think I'm doing something wrong with the animate() method.
Here is the HTML file
<!DOCTYPE html>
<html>
<head>
<title> each() test1 </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
body{
background-color: #000000;
color: #ffffff;
}
div {
font-size: 3em;
color: #ff0000;
text-align: center;
cursor:pointer;
font-weight: bolder;
width: 300px;
}
</style>
</head>
<body>
<div> Click here </div>
<div> to iterate through </div>
<div> these divs </div>
</body>
<script src="theJavaScriptFile.js"> </script>
</html>
2 answers
solution1
1 ACCPTED 2017-04-14 00:03:25
Just don't use blue or red color codes. It will get converted to RGB code. For example this.style.color will be RGB(0,0,255) not blue so your expression always returns true no matter what color is it.
I create this example in different color mode for you to take a look https://jsfiddle.net/3tpncgr1/1/
Anyway, if you want to have special logic for particular color then keep using this approach. Otherwise, use class name instead of color code to determine. Because browsers always return rgb value for color attribute
solution2
0 2017-04-14 00:27:38
I would manage it by using a active class to control the states.
In that case I would succes changing
$(document).ready(function(){ $("div").click(function() { $.each( $(this).parent().children("div"),function() { if (!$(this).hasClass('active')) { $(this).addClass('active'); $(this).animate({ color:'blue' },1000); } else { $(this).removeClass('active'); this.style.color = "red"; } }); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <title> each() test1 </title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <style> body{ background-color: #000000; color: #ffffff; } div.active{ } div { font-size: 1em; color: #ff0000; text-align: center; cursor:pointer; font-weight: bolder; width: 300px; } </style> </head> <body> <div id="containerOne"> <div> Click here </div> <div> to iterate through </div> <div> these divs </div> </div> <div id="containerTwo"> <div> Click here </div> <div> to iterate through </div> <div> these divs </div> </div> </body> <script src="theJavaScriptFile.js"> </script> </html>
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.