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(  );
}

UI 从未更新。

解决方案是：

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

说明：函数enableWaitState((在DOM中添加了一个类，因为javascript代码现在等待50毫秒，然后运行UI有时间刷新自身。