Question

我有一个包含元素的div。当我点击一个元素时，会发生一个动作。在行动期间，我想让我的div颜色变为黑色＆amp;白色和动作后它将重置颜色。

所以我创建了一个简单的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才有时间刷新自己。

JQuery / JavaScript addClass不起作用

4 个答案: