jQuery animate（）はIf-Elseステートメントでは機能しません。

JQuery beginner here。私はそれらをクリックすると、一組のdivが赤から青に変わるようにしようとしています。もう一度クリックすると、divが赤に戻ってきます。私はdivの色を変更するjQueryのanimate（）メソッド（jQueryカラープラグイン）を使用してみました。しかし、以下のコードは部分的にしか動作しません。jQuery animate（）はIf-Elseステートメントでは機能しません。

$(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をクリックすると、if文が正常に動作します。 divは青に変わります。しかし、再度divをクリックすると、divは赤に戻りません。 else文はうまくいかないようです。私の間違いに関するアイデアは？私は$(this).animate({...})をthis.style.color = "blue";に置き換えたときにelseステートメントが動作するので、私はanimate（）メソッドで何か問題があると思っています。ここで

ちょうど blueまたは redカラーコードを使用していない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

おそらく ''青い ''でしょう。これをデバッグするには、[browser console（dev tools）]（https://webmasters.stackexchange.com/q/8525）（ 'F12'を押す）と' console.log（this.style.color）; 'を使用してください。 – Xufox

if文の直前でconsole.log this.style.colorの場合はどうしますか？ – nixkuroi

です。それはRGBコードに変換されます。たとえばthis.style.colorについてはので、あなたの表現は、常に関係なく、それが何であるか、色trueを返さないRGB(0,0,255)ないblueになります。

あなたはとにかく見https://jsfiddle.net/3tpncgr1/1/

を取るために私はあなたが特定の色のための特別なロジックを持つようにしたい場合は、このアプローチを使用し続ける、異なるカラーモードでこの例を作成します。それ以外の場合は、カラーコードの代わりにクラス名を使用して決定します。ブラウザは常にcolor属性のrgbの値を返します。

出典

2017-04-14 00:03:25

私はあなたの例を試してみました。 divをクリックすると、divは青に変わりますが、別のクリックで赤に戻りません。 –

申し訳ありませんが、私はそれを保存することを恐れています。それを試してみてください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ステートメントでは機能しません。

答えて

関連する問題