最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - jquery - remove class based on condition - Stack Overflow

programmeradmin5浏览0评论

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

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);
})();
Share Improve this question edited Jan 30, 2016 at 11:20 Pranav C Balan 115k25 gold badges171 silver badges195 bronze badges asked Jan 30, 2016 at 11:05 JavaUserJavaUser 26.3k47 gold badges116 silver badges144 bronze badges 1
  • use hasClass method ! – Venkat.R Commented Jan 30, 2016 at 11:11
Add a comment  | 

4 Answers 4

Reset to default 13

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

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.

I think you are getting data.is_running as "true"

Please change your code like this

if (data.is_running == true){
   //your code
}
or 
if (data.is_running == "true"){
   //your code
}
发布评论

评论列表(0)

  1. 暂无评论