Более эффективный способ прослушивания метода jQuery hasClass?

Я пытаюсь слушать, если элемент с идентификатором dropdown имеет класс open. Если #dropdown имеет .open, добавьте класс badge-border в класс badge. Если #dropdown не имеет .open, удалите класс badge-border из класса badge. Вот мой код:Более эффективный способ прослушивания метода jQuery hasClass?

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 миллисекунду ISN Это лучший способ сделать это.

Чтобы иметь больше смысла всего этого, вы можете просмотреть демо здесь: http://jsfiddle.net/obliviga/qt7o3u6e/2/

Вам нужно будет максимизировать окно просмотра, пока Navbar не является в мобильном режиме, затем нажмите корзина ниспадающее меню, чтобы увидеть значок-х добавлена граница.

EDIT: Причины, почему я осуществил, как я сделал это потому, что, когда пользователь щелкает из выпадающего списка корзины, он должен закрыть, и стили должны вернуться к тому, как они были раньше.

источник

2015-08-30 Ralph David Abernathy

EDIT: Причина, почему я осуществил, как я сделал это, потому что, когда пользователь нажимает из выпадающего списка корзины, он должен закрыть, и стили должны вернуться к тому, как они были раньше.

-Обновлен Добавлено click события, прикрепленного к document, который удаляет .open класса от #dropdown, если присутствует, вызывает обработчик #dropdown aclick события с this набором для #dropdown a с обработчиком удалить .badge-border класс от .badge элемента, который должен REVERT стилей .badge к свойства первоначально установлены на css.

Try прикрепление 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]) 
      } 
     } 
    }) 
    });

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

источник

2015-08-30 16:22:55 guest271314

Благодарим за решение.Однако причина, по которой я реализовал то, что я сделал, - это то, что, когда пользователь щелкает из раскрывающегося списка тележки, он должен закрываться, и стили должны возвращаться к тому, как они были раньше. С вашим решением, когда пользователь щелкает за пределами раскрывающегося списка, белая рамка на значке сохраняется. –

@RalphDavidAbernathy _ «причина, по которой я реализовал то, как я это сделал, потому что, когда пользователь щелкает из раскрывающегося списка тележки, он должен закрываться, и стили должны возвращаться к тому, как они были раньше». _ Можете включить эту деталь в вопрос? См. Также http://stackoverflow.com/questions/24068750/watch-for-dynamically-added-class/ – guest271314

Извинения. Он был включен. –

Рассмотрите возможность использования Mutation Observers, предназначенного для отслеживания изменений DOM, включая изменения значений атрибутов.

Обратите внимание, что IE поддерживает Mutation Observer с версии 11. Для IE 10 и старше требуется резерв.

источник

2015-08-30 16:27:30

Более эффективный способ прослушивания метода jQuery hasClass?

ответ

Смежные вопросы