Question

当我在代码中添加class时使用jquery，我看到该类已添加到该元素中，但是该元素似乎直到下一次单击时才使用新类呈现。？为什么

我尝试过offsetHeight，并且尝试过setTimeout在1秒后应用addClass，但是它们仍然不渲染，直到下次单击。我曾尝试单击虚拟按钮，但直到用户手动单击页面上的任何内容后仍无法渲染。

function SetStatus(button) {
  if ($('#' + button.id).prop('value') == 'ALL') {
    $('.optionsbtn').removeClass('btn-bordered');
    $('.optionsbtnall').removeClass('btn-bordered');
    $('#tblData').DataTable().ajax.reload();
    return false;
  } else {
    setTimeout(function() {
      $('.optionsbtn').addClass('btn-bordered');
      $('.optionsbtnall').addClass('btn-bordered');
    }, 500)
    return false;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="margin-bottom: -30px; margin-left: 10px;">
  <input type="hidden" name="ctl00$ctl00$ctl00$MainCPHm$MainCPH$MainCPH$ServiceFiltersHF" id="ServiceFiltersHF" value="ALL">
  <button id="DoNothing" onclick="return false;" style="display: none;"></button>
  <input type="submit" name="ctl00$ctl00$ctl00$MainCPHm$MainCPH$MainCPH$ALLbtn" value="ALL" onclick="return SetStatus(this);" id="ALLbtn" class=" btn btn-inverse btn-xs optionsbtn optionsbtnall" title="All">
  <input type="submit" name="ctl00$ctl00$ctl00$MainCPHm$MainCPH$MainCPH$Pendingbtn" value="Requested" onclick="return SetStatus(this);" id="Pendingbtn" class="btn-primary btn btn-xs  optionsbtn" title=" Requested">
  <input type="submit" name="ctl00$ctl00$ctl00$MainCPHm$MainCPH$MainCPH$Plannedbtn" value="Planned" onclick="return SetStatus(this);" id="Plannedbtn" class="  btn-info btn btn-xs  optionsbtn" title="Planned">
  <input type="submit" name="ctl00$ctl00$ctl00$MainCPHm$MainCPH$MainCPH$Completedbtn" value="Completed" onclick="return SetStatus(this);" id="Completedbtn" class=" btn-purple btn btn-xs  optionsbtn" title="Completed">
  <input type="submit" name="ctl00$ctl00$ctl00$MainCPHm$MainCPH$MainCPH$ReportedBtn" value="Reported" onclick="return SetStatus(this);" id="ReportedBtn" class=" btn-success btn btn-xs  optionsbtn" title="Reported">
  <input type="submit" name="ctl00$ctl00$ctl00$MainCPHm$MainCPH$MainCPH$CancelledBtn" value="Cancelled" onclick="return SetStatus(this);" id="CancelledBtn" class=" btn btn-danger btn-xs  optionsbtn" title="Cancelled">
</div>

在上面的函数中，我希望元素在1秒钟后具有btn-bordered类（在我检查元素时会这样做），但是直到下一次单击时它才会呈现？

我应该说，当我检查页面上的按钮时，它确实具有“ btn-bordered”类，但是在按钮发生更改的情况下，直到按钮发生单击，该按钮才反映样式，该代码似乎是正确的，但是是否有其他原因可以阻止浏览器在下次单击之前呈现该类？

Answer 1

这就是您应该做的，这是演示Demo

function SetStatus(button) {
  if ($('#' + button.id).prop('value') == 'ALL') {
    $('.optionsbtn').removeClass('btn-bordered');
    $('.optionsbtnall').removeClass('btn-bordered');


  } else {

      $('.optionsbtn').addClass('btn-bordered');
      $('.optionsbtnall').addClass('btn-bordered');

  }
}

addClass直到下次单击才呈现

1 个答案: