2016-01-30 110 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 
}