Javascript：即使满足条件，函数也不起作用（我很难解释）答案

【问题标题】：Javascript: function doesnt work even though condition is met (hard for me to explain)Javascript：即使满足条件，函数也不起作用（我很难解释）
【发布时间】：2015-09-04 06:05:04
【问题描述】：

这个问题的答案当然很简单，但我无法解释，所以我在这里问。

https://jsbin.com/tuzifobale/edit?html,css,js,output

我试图让一个 div 在您单击它时添加类，如果该 div 具有该类，则它会发生 X 功能（在本例中为淡出），因此单击它会使 X 功能发生。

年表在 Javascript 中是如何工作的？是否有任何阅读链接可以让我了解事情何时以及如何适用？谢谢。

【问题讨论】：

解释得更简单，而是 jsBin 自己添加有问题的代码，然后再被否决
不好意思下次再做。
在此期间想帮助我吗？

标签： javascript jquery jquery-events

【解决方案1】：

欢迎使用 StackOverflow。

您在编写问题时应采取更多预防措施，并确保其以良好的英语编写，并且以某种方式使事先不知道您想要实现的目标的人在阅读问题时能够理解您的目标。

我会尝试回答我认为我理解的部分。

如果 div 具有该类，则 X 函数（在本例中为淡出）发生

据我了解，您想在<div> 接收到一个类（clicked?）时触发函数 X 的执行。

在 Javascript 中观察 DOM 元素的类值变化是一个似乎没有可靠解决方案的问题。（见related questions。）

因此点击它会触发 X 功能。

也许您的目标实际上更简单。如果您只想在单击<div> 时触发函数的执行，那么您将不得不查看mouse event handlers，尤其是.click()，它允许

将事件处理程序绑定到“点击”JavaScript 事件

【讨论】：

【解决方案2】：

我在你 JsBin 中发现的一些东西如下，

始终在 Head 中或在元素加载之前包含 js 文件，如下所示
你找不到，如果元素被点击或者事件被触发，就像你在 for 循环中所做的那样
还有什么？

请看下面，看看它是否对你有帮助

$(document).ready(function(){
    $('div').animate({left:'200px'});
    $('div').animate({top:'200px'});  
    $('div').animate({left:'px'});
    $('div').animate({top:'-100px'});
    $('div').animate({top:'200px'});
    $('div').animate({left:'0px'});
    $('div').animate({top:'0px'});
  
     $('div').on('click', function(){
       $(this).addClass('clicked'); 
       $(this).stop(); //Stop animation
    });

});

div {width:100px; height:100px; background:red; position:relative}
.clicked {
  
  background: green;
  
}

<!DOCTYPE HTML>

<html>
  <head>

    <title></title>
      <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  </head>
  
  <body>    
    
    <div></div>
    
  </body>
</html>

【讨论】：