jquery - remove class based on condition

2021-6-21 anglehua

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

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



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


采集自互联网,如有侵权请联系本人

Powered by emlog 京ICP备15036472号-3 sitemap