jquery - rimuovere la classe in base alla condizione

Question

Sto interrogando una risposta JSON ogni 1 minuto e in base alla risposta che sto aggiungendo o rimuovendo l'overlay sulla mia pagina. La mia risposta è per la maggior parte del tempo positiva, in questo caso, dovrei rimuovere la classe di overlay. Nel codice qui sotto, la parte è in esecuzione ogni volta e rimuovere le funzioni di classe e nascondi vengono eseguite ogni volta. C'è un modo per evitarlo. Esiste un metodo in jquery per verificare se la classe viene aggiunta o meno. Anche nascondere è attivo o no. Oppure qualcuno può dare sintassi per ottenere ciò impostando e disabilitando una variabile booleana.

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

Answer 1

È possibile controllare se un elemento ha una specifica classe con hasclass():

var overlay = $('#overlay'); 

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

Ma è possibile utilizzare toggle() e toggleClass(), vedere Pranav's answer.

Answer 2

È possibile utilizzare toggle() e toggleClass() con Boolean valore senza bisogno di if...else dichiarazione altrimenti restituisce false

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

E per verificare che un elemento ha una classe o non è possibile utilizzare hasClass() che restituisce true se gli elementi associati sono assegnati alla classe data

Answer 3

Prova come sotto e mantieni la variabile $() query methods in modo da renderla efficiente!

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

Answer 4

penso che hai trovato data.is_running come "vera"

Si prega di modificare il codice come questo metodo di hasClass

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