更有效地监听 jQuery hasClass 方法？

Question

我正在尝试监听 ID 为 dropdown 的元素是否具有 class open。如果 #dropdown 有 .open，将 class badge-border 添加到 class badge。如果 #dropdown 没有 .open，请从 class badge 中删除 class badge-border。这是我的代码：

HTML:

<!doctype html>

<body>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>

        </button>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Language (EN)</a>
          </li>
          <li><a href="#">Currency ($)</a>
          </li>
          <li><a href="#"><i class="fa fa-user"></i> My Account</a>
          </li>
          <li class="dropdown" id="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-shopping-cart"><span class="badge">36</span></i> My Cart</a>

            <ul class="dropdown-menu" id="dropdown-menu">
              <li><a href="#">Action</a>
              </li>
              <li><a href="#">Another action</a>
              </li>
              <li><a href="#">Something else here</a>
              </li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Separated link</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script>
    window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')
  </script>
</body>

JS:

  $(document).ready(function () {

      var interval = setInterval(changeBadge, 1);

      function changeBadge() {
          if ($('#dropdown').hasClass('open')) {
              console.log('add class border');
              // clearInterval(interval);
              $(".badge").addClass("badge-border");
          } else {
              console.log('remove class border');
              $(".badge").removeClass("badge-border");
          }
      };

  });

上述方法可以实现我的目标，但我觉得每 1 毫秒监听一个事件并不是最好的方法。

为了更好地理解这一切，您可以在此处查看演示：http://jsfiddle.net/obliviga/qt7o3u6e/2/

您需要最大化视口，直到导航栏不处于移动模式，然后单击购物车下拉菜单以查看添加的徽章边框。

编辑： 我之所以按我的方式实现是因为当用户点击购物车下拉菜单时，它应该关闭，并且样式应该恢复到之前的样子。

Answer 1

EDIT: The reason why I implemented the way I did is because when the user clicks out of the cart dropdown, it should close, and the styles should revert to how they were before.

已更新，添加了附加到 document 的 click 事件，从 #dropdown 中移除 .open class（如果存在），调用 #dropdown a 的处理程序click 事件 this 设置为 #dropdown a ，处理程序从 .badge 元素中删除 .badge-border class 应该恢复 .badge 的样式到最初设置为 css.

的属性

尝试将 click 事件附加到选择器 $("#dropdown a")，在处理程序中的 $(this).parents("#dropdown") 上调用 .delay(1)，.queue() 函数检查 open class , .toggleClass() 用第二个参数 Boolean $(this).parents("#dropdown")

在 $(this).parents("#dropdown") 上设置 $(this).parents("#dropdown") class

  $(document).ready(function () {

  function changeBadge(e) {
      $(this).parents("#dropdown")
          .delay(1, "check")
          .queue("check", function () {
          $(".badge").toggleClass("badge-border", $(this).hasClass("open"));
      }).dequeue("check")
  }

  $("#dropdown a").click(changeBadge);
  $(document).on("click", function (e) {
      var elem = $("#dropdown");
      if ($(e.target).is("#dropdown *")) {
          return false
      } else {
          if (elem.is(".open") || $(".badge").hasClass("badge-border")) {
              elem.removeClass("open");
              changeBadge.call(elem.find("a.dropdown-toggle")[0])
          }
      }
  })
  });

jsfiddle http://jsfiddle.net/qt7o3u6e/6/

Answer 2

考虑使用 Mutation Observers 来准确跟踪 DOM 变化，包括属性值的变化。

请注意，IE 从版本 11 开始支持 Mutation Observers。对于 IE 10 及更早版本，需要回退。

更有效地监听 jQuery hasClass 方法？

More efficient way of listening for jQuery hasClass method?

html

javascript

jquery

events

listener