2016-01-30 72 views
7

我每1分钟轮询一次json响应,并基于我在页面上添加或删除叠加层的响应。 我的回答大部分时间是积极的,在这种情况下,我应该删除覆盖类。 在下面的代码中,else部分每次都在执行,并且每次都移除类和隐藏函数。 有什么办法可以避免这种情况。 jquery中是否有任何方法来检查类是否被添加。还隐藏是否有效。 或者任何人都可以通过设置和取消设置布尔变量来提供语法来实现此目的。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); 
})(); 
+0

使用hasClass方法你的代码! –

回答

3

您可以检查元素是否有特定的类hasclass()

var overlay = $('#overlay'); 

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

但是你可以使用toggle()toggleClass(),看Pranav's answer

+1

请注意'if(overlay.hasClass('show')){overlay.removeClass('show'); }'实际上没有直接调用'overlay.removeClass('show')'有效,因为'removeClass'也首先查询类的存在。 –

13

您可以使用toggle()toggleClass()Boolean值无需if...else声明,否则返回false

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

,以及检查一个元素有一个类或不是你可以使用hasClass()这返回true如果匹配的元素被赋予给定的类别

+2

这应该是被接受的答案。 – cfischer

4

请像下面这样试试,并保持$() query methods变量以提高效率!

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(); 
} 
+0

这是如何更有效率?由于if语句中只有一个分支被执行,所以DOM只被查询过一次。 –

+0

我的意思是有效的是关于DOM :)它的查询只有两次,但它被称为覆盖3次和alertDiv 2次 –

0

我觉得你越来越data.is_running为 “真”

请更改这样

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