Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery - remove class based on condition

I am polling a json response for every 1 min and based on the response I am adding or removing overlay on my page. My response is most of the time positive , in this case , i should remove the overlay class. In the below code, else part is executing every time and remove class and hide functions are executed every time. Is there any way to avoid this . Is there any method in jquery to check whether class is added or not . Also hide is active or not. Or can anyone give syntax to achieve this by setting and unsetting a boolean variable.

(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);
})();
like image 279
JavaUser Avatar asked Jan 30 '16 11:01

JavaUser


People also ask

How to remove a particular class in jQuery?

jQuery removeClass() Method The removeClass() method removes one or more class names from the selected elements. Note: If no parameter is specified, this method will remove ALL class names from the selected elements.

How to replace classes in jQuery?

In jQuery, to replace one class properties with another, there is a function called replaceClass() through which it takes in two different class names the first class name is specified as a class which should be replaced with the second class name that is specified as the second parameter in the function, where it ...


3 Answers

You can use toggle() and toggleClass() with Boolean value no need of if...else statement otherwise returns false

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

And for checking that an element has a class or not you can use hasClass() which returns true if matched elements are assigned the given class

like image 132
Pranav C Balan Avatar answered Sep 22 '22 19:09

Pranav C Balan


Try like below and keep the $() query methods in variable to make efficient !

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();
 }
like image 39
Venkat.R Avatar answered Sep 20 '22 19:09

Venkat.R


You can check if an element has a specific class with hasclass():

var overlay = $('#overlay');

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

But you can use toggle() and toggleClass(), see Pranav's answer.

like image 45
cfischer Avatar answered Sep 20 '22 19:09

cfischer