JQuery/JavaScript addClass不起作用

我有一个包含元素的div。当我点击一个元素时，会发生一个动作。在行动期间，我想让我的div颜色变为黑色&白色，并且在动作之后它会重置颜色。JQuery/JavaScript addClass不起作用

所以我创建了一个简单的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调用，它就可以工作！

任何想法？

来源

2017-08-20 ATN54

@AndreiGheorghiu这没有什么区别。 – Curt

您提供的代码不足以在此处重现您的问题。请在问题内部创建一个[mcve]（使用'<>'按钮），链接所需的外部资源并确保您可以体验问题。 –

只是一个猜测：是'//在这里做一些JavaScript代码'同步计算？在这种情况下，你不会看到类的变化，因为函数的（单线程）执行返回后，类的状态没有改变。在这种情况下，您需要将计算更改为异步执行。 – obecker

试试这个

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

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

来源

2017-08-20 09:06:15 gbu

您需要从您的选择remve额外$()。

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

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

此外，此代码只能在图表元素加载到DOM后才能使用。您可以使用控制台来检查：

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

来源

2017-08-20 09:19:51 Beri

根据您的启用和禁用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>

希望，它为你的作品。

来源

2017-08-20 09:31:50

所以，这是我再次了解更多细节。我正在使用DevExtreme，并在点击图表中的某个栏时执行代码。现在我确信它在一个同步的ajax调用完成后可以工作。 – ATN54

但doens't工作，如果我只运行JavaScript像：\t var clickedPoint = e.target; \t \t \t var length = responseData [depth] .values.length; \t \t \t var index = -1; \t \t \t var name =“”; \t \t \t为（I = 0; I <长度;我++）{ \t \t \t \t如果（responseData [深度] .values [I]。名称== clickedPoint._dataItem.argument）{ \t \t \t \t \t name = responseData [depth] .values [i] .name; \t \t \t \t \t \t index = i; \t \t \t \t \t break; \t \t \t \t} \t \t \t} – ATN54

OK，我找到了解决办法

我probleam是：

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代码现在运行UI之前等待50毫秒已经刷新自己的时间。

来源

2017-08-20 12:24:53 ATN54

Pleae关闭问题的话，那么它会从开放队列dissapear。 – Beri

JQuery/JavaScript addClass不起作用

回答

相关问题