jQuery animate（）不适用于If-Else Statement

JQuery初学者在这里。当我点击它们时，我试图让一组div从红色变成蓝色。当我再次点击它们时，我想让div变回红色。我尝试使用jQuery的animate（）方法（使用jQuery颜色插件）更改div的颜色。但是，下面的代码只是部分工作。jQuery animate（）不适用于If-Else Statement

$(document).ready(function(){ 

    $("div").click(function() { 
     $("div").each(function() { 
      if (this.style.color !== "blue") { 
       $(this).animate({ 
        color:'blue' 
       },1000); 
      } else { 
       this.style.color = "red"; 
      } 
     }); 
    }); 
});

当我点击一个div，如果语句工作正常。 divs变成蓝色。但是，当我再次点击div时，div不会变回红色。 else语句似乎不起作用。对我的错误有任何想法？ else语句的工作原理是当我将$(this).animate({...})替换为this.style.color = "blue";时，我认为我在animate（）方法中做了错误处理。

下面是HTML文件

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

来源

2017-04-13 Alex Fidel Chen

你尝试$（本）的.css（ “颜色”， “红”）？ – Vivick

它可能永远不会“蓝色”。请使用[浏览器控制台（开发工具）]（https://webmasters.stackexchange.com/q/8525）（点击'F12'）并使用'console.log（this.style.color）;'调试这个。 – Xufox

如果你在if语句之前使用console.log this.style.color，你会得到什么？ – nixkuroi

只要不使用blue或red颜色代码。它将被转换为RGB代码。例如this.style.color将是RGB(0,0,255)而不是blue所以无论它是什么颜色，您的表情总是返回true。

我创建不同的色彩模式，这个例子给你看看https://jsfiddle.net/3tpncgr1/1/

无论如何，如果你想拥有特殊的逻辑为特定的颜色，然后继续使用这种方法。否则，使用类名代替颜色代码来确定。因为浏览器总是返回rgb值color属性

来源

2017-04-14 00:03:25

我试过你的例子。当我点击一个div时，divs会变成蓝色，但在另一次点击后它们不会变回红色。 –

对不起，我愿意保存它。在这里试试https://jsfiddle.net/3tpncgr1/1/ –

这一个似乎工作。 – nixkuroi

我会通过使用活动类来控制它的状态。

在这种情况下，我会更迭改变

$(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>

来源

2017-04-14 00:27:38 JohnV

jQuery animate（）不适用于If-Else Statement

回答

相关问题