jQuery - 根据条件删除类

Question

我每分钟轮询一次JSON响应，根据响应结果在页面上添加或移除叠加层。 我的响应大多是正面的，在这种情况下，我应该移除叠加层类。 在下面的代码中，else部分每次都会执行，并且每次都会执行删除类和隐藏函数。 有没有办法避免这种情况。 有没有jQuery方法可以检查类是否已添加。 还有，是否激活了隐藏功能。 或者，有人可以提供一些语法，通过设置和取消布尔变量来实现此目的。

(function poll() {
  setTimeout(function() {
    $.ajax({
      url: "path",
      type: "GET",
      success: function(data) {
        console.log("polling" + data);
        if (data.is_running === true) {
          $("#overlay").addClass('show');
          $("#alertDiv").show();
        } else {
          console.log("removing ....");
          $("#overlay").removeClass('show');
          $("#alertDiv").hide();

        }
      },
      dataType: "json",
      complete: poll,
      timeout: 200
    })
  }, 5000);
})();

- JavaUser

---

使用 hasClass 方法！ - Venkat.R

Answer 1

你可以使用 toggle() 和 toggleClass()，带有布尔值的参数，而不需要 if...else 语句，否则返回 false。

$("#overlay").toggleClass('show',data.is_running);
$("#alertDiv").toggle(data.is_running);

您可以使用 hasClass() 方法来检查元素是否具有特定的类，如果匹配的元素有指定的类，则返回true。

- Pranav C Balan

Answer 2

尝试以下操作，并将$()查询方法存储在变量中以提高效率！

var $overLay = $("#overlay"),
    $alertDiv = $("#alertDiv"),
    sh = 'show';

 if (data.is_running === true) {
   $overLay.addClass();
   $alertDiv.show(sh);
 } else if ($overLay.hasClass(sh)) {
   $overLay.removeClass(sh );
   $alertDiv.hide();
 }

- Venkat.R

---

这样更有效率吗？由于if语句中只有一个分支会被执行，因此DOM仅会被查询一次以获取这两个元素。 - Raphael Schweikert

我所说的高效是指DOM :) 它只查询了两次，但它已被调用了3次overlay和2次alertDiv。 - Venkat.R

Answer 3

您可以使用hasClass()方法来检查元素是否具有特定的类：

var overlay = $('#overlay');

if (overlay.hasClass('show')) {
  overlay.removeClass('show');
}

但是你可以使用 toggle() 和 toggleClass()，请参见Pranav的答案。

- cfischer

---

请注意，if(overlay.hasClass('show')) { overlay.removeClass('show'); } 实际上比直接调用 overlay.removeClass('show') 更低效，因为 removeClass 还会先查询类的存在性。 - Raphael Schweikert

Answer 4

我认为你正在获取数据.is_running的值为"true"

请将你的代码更改为以下内容

if (data.is_running == true){
   //your code
}
or 
if (data.is_running == "true"){
   //your code
}

- Ali Khan