如果 div 有一个活动类，则运行一个函数，否则使用 jQuery 运行另一个函数答案

【问题标题】：Run a function if a div has an active class else run another function with jQuery如果 div 有一个活动类，则运行一个函数，否则使用 jQuery 运行另一个函数
【发布时间】：2016-12-12 17:35:34
【问题描述】：

我正在尝试获取一个 if else 语句，如果 #selectedwhip div 具有 .active 类，该语句将允许我运行一个函数。如果没有，我希望它运行另一个功能。我刚刚使用控制台查看它是否可以工作，但它只返回控制台中的 else 语句。

场景是 3 张图片，它们充当链接。通过单击链接，他们会将活动类添加到另一个 div。通过处于活动状态，图像将被插入到 div 中。单击图像确实会向 div 添加一个活动类，但不会导致 if 语句记录到控制台。

有什么东西阻止它工作吗？

jQuery

    $(".carbutton").click(function(){
      $("#selectedwhip").addClass("active");
    });

    $(function() {
      if ($("#selectedwhip").hasClass("active")) {
        console.log('active');
      }
      else {
        console.log('unactive');
      }
    });

HTML

  <div class="cars">
    <h1>Title</h1>
    <div class="section group trio-cars">
        <div class="col span_1_of_3 carbutton" id="carbutton">
        <a id="car1"><img src="img/frontleftbmw.jpg" width="100%"></a>
        </div>
        <div class="col span_1_of_3 carbutton" id="carbutton">
        <a id="car2"><img src="http://placehold.it/350x150" width="100%"></a>
        </div>
        <div class="col span_1_of_3 carbutton" id="carbutton">
        <a id="car3"><img src="http://placehold.it/350x150" width="100%"></a>
        </div>
    </div>
    </div>

        <div class="col span_1_of_3">
         <div class="stats-image" id="selectedwhip">
         </div>
        </div>

【问题讨论】：

if 语句只发生在页面加载时（当 dom 准备就绪时），点击后根本不会发生
是的，因为这个检查它的功能只有在你启动页面时才会运行。然后，单击.carbutton，这将添加类，但您不会再次运行该函数。
如果有意义的话，有没有办法让它不断运行 if else 语句？
是的。将其设为命名函数，然后在您的就绪语句中调用该函数。然后，您也可以在单击按钮时调用相同的函数。

标签： javascript jquery html

【解决方案1】：

你必须有一个检查功能，例如：

function check() {
  if ($("#selectedwhip").hasClass("active")) {
    console.log('active');
  } else {
    console.log('unactive');
  }
}

$(function() {
  $(".carbutton").click(function() {
    $("#selectedwhip").addClass("active");
    check();
  });
});

刚刚注意到您有重复的 ID carbutton，这使其成为无效的标记创建。每个 ID 都必须是唯一的。

【讨论】：

这就是我要做的。如果您还想检查准备就绪，还请调用您需要做的所有事情，也就是调用 check(); .carbutton 点击函数上方的函数。这样你就可以准备好并点击

【解决方案2】：

你必须清楚你想做什么以及什么时候做。因为你只是在页面准备就绪后立即执行一个函数

$(function() {
  if ($("#selectedwhip").hasClass("active")) {
    console.log('active');
  }
  else {
    console.log('unactive');
  }
});

上面的代码将在第一次加载页面时检查 selectedwhip 是否有活动类。您必须将此条件附加到事件中

【讨论】：

我现在已经将点击事件添加到其中，目的是在.carbutton处于活动状态时将图像插入#selectedwhip div