Question

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

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

考虑使用Mutation Observers准确跟踪DOM更改，包括属性值的更改。

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

Answer 2

编辑：我实施我的方式的原因是因为什么时候用户点击购物车下拉列表，它应该关闭，以及样式应该回到以前的样子。

已更新，已添加click附加到document的{{1}}事件，如果存在.open #dropdown，则#dropdown a来自click this事件的调用处理程序将#dropdown a设置为.badge-border，处理程序从.badge元素中移除.badge类，该类应将css的样式恢复为最初设置为click的属性

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

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

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

课程

xyplot( signal ~ time | as.factor(treatment), data=data,groups=cell,
        fill.color = as.character(data$color),
        panel = function(x, y,fill.color,...,subscripts){
          fill = fill.color [subscripts]
          panel.xyplot(x, y,pch=19, col=fill, type ="p")}
)

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

更有效的监听jQuery hasClass方法的方法？

2 个答案: