jQuery / JavaScript addClass不起作用

Question

我有一個包含元素的div。 當我單擊一個元素時，將發生一個動作。 在操作期間，我想將div的顏色更改為黑白，並且在操作之后，它將重置顏色。

所以我創建了一個簡單的css3類：

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

在我的腳本中，我有兩個功能：

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

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

在我的JavaScript代碼中，我編寫了單擊按鈕時調用的方法：

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

}

不幸的是，它不起作用。 但是，如果我在enableWaitState（）和disableWaitState（）之間進行ajax調用，它將起作用！

有任何想法嗎？

Answer 1

您需要從選擇器中刪除其他$() 。

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

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

同樣，此代碼僅在將圖表元素加載到DOM后才有效。 您可以使用控制台檢查以下內容：

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

Answer 2

嘗試這個

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

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

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> 

希望這對你有用。

Answer 4

好，我找到了解決方案

我的問題是：

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

用戶界面從未更新過。

解決方案是：

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

說明：函數enableWaitState（）在DOM中添加一個類，因為現在JavaScript代碼等待50毫秒，然后運行UI才能刷新自身。