JQuery/JavaScript addClassが機能しません

Question

私は要素を含むdivを持っています。 1つの要素をクリックすると、アクションが発生します。アクション時間中、divの色を黒に変更したい場合は&を白にして、アクションの後に色をリセットします。

だから私はシンプルなCSS3クラスの作成：私はをクリックしたときに呼び出されるメソッドを記述し、私のjavascriptのコードで

function enableWaitState() { 
    $($("#chart")).addClass("gray"); 
} 

function disableWaitState() { 
    $($("#chart")).removeClass("gray"); 
} 

：

gray { 
    background-color:red; 
    -moz-filter: grayscale(100%); 
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%); 
} 

をそして、私のスクリプトで、私は2つの機能を持っていますボタン：

function back() { 
    enableWaitState(); 
    // here doing some javascript code 
    disableWaitState(); 
} 

}

残念ながら、動作しません。しかし、enableWaitState（）とdisableWaitState（）の間でajax呼び出しを行うと、機能します！

アイデア？

Answer 1

は、あなたがあなたのセレクタから追加$()をremveする必要があり、この

function enableWaitState() { 
    $("#chart").addClass("gray"); 
} 

function disableWaitState() { 
    $("#chart").removeClass("gray"); 
} 

Answer 2

を試してみてください。

function enableWaitState() { 
    $("#chart").addClass("gray"); 
} 

function disableWaitState() { 
    $("#chart").removeClass("gray"); 
} 

また、このコードはチャート要素がDOMに読み込まれた後にのみ機能します。あなたはそれをチェックするために、コンソールを使用することができます。

console.log($("#chart").length) 

Answer 3

のdivの背景色を有効化および無効化のあなたの要件ごとに、私は、ユーザーがdiv要素内の要素をクリックしたときに点滅効果をしたいと思います。

下記のコードスニペットを確認してください。

function blinkEffect() { 
 
    let elem = '#chart'; 
 
    $(elem).addClass('gray'); 
 

 
    setTimeout(function() { 
 
    $(elem).removeClass('gray'); 
 
    }, 200); 
 
} 
 

 
$('#btn1, #btn2, p').on('click', function() { 
 
    blinkEffect(); 
 
});

div { 
 
    width: 600; 
 
} 
 

 
.gray { 
 
    background-color: gray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='chart'> 
 
    Some elements in this div to change background color on click and reset it after 200ms<br><br> 
 
    <button id='btn1'>Btn 1</button><br><br> 
 
    <button id='btn2'>Btn 2</button> 
 
    <p>Welcome..<br>I am a paragraph...!!! <br>Click me to see the change</p> 
 
</div>

希望は、それはあなたのために働きます。 UIが更新されなかった

function back() { 
    enableWaitState(); 
    // here doing some javascript code 
    disableWaitState(); 
} 

：

Answer 4

OK、私は私のprobleamでしたソリューション

を見つけました。

解決策は以下のとおりです。

 enableWaitState(depth); 
     setTimeout(function() {   
      // here doing some javascript code... 
     disableWaitState(depth); 
     }, 50); 

説明：関数enableWaitState（）DOMにクラスを追加し、JavaScriptコードは、現在UIを実行する前に、50ミリ秒を待つため、自分自身をリフレッシュする時間を持っているが。