1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. Решение проблем

Почему после добавления once() и each() в Drupal behavior перестал работать js код?

Главные вкладки

Аватар пользователя nathan158 nathan158 30 октября 2022 в 17:44

Была проблема с тем, что часть js кода срабатывала несколько раз, поэтому добавил once() и each() (смотри комментарии):

(function($, Drupal) {
  Drupal.behaviors.collapsedPricing = {
    attach: function attach(context) {
      $(".pricing .pricing-tabs-contents", context)
        .once("collapsedPricing")      // добавил
        .each(function() {                     // добавил
          const pricingTabsContents = $(this);
          if (window.innerWidth < 1001) {
            $(
              ".pricing .pricing-tabs-contents .text, .pricing .pricing-tabs-contents .blue-table-container"
            ).hide();
            pricingTabsContents.addClass("collapsed");
          }

          if (pricingTabsContents) {
            $(".pricing .pricing-tabs-contents .tab-content").click(() => {
              if (pricingTabsContents.hasClass("collapsed")) {
                $(
                  ".pricing .pricing-tabs-contents .text, .pricing .pricing-tabs-contents .blue-table-container"
                ).hide("slow");
              } else {
                $(
                  ".pricing .pricing-tabs-contents .text, .pricing .pricing-tabs-contents .blue-table-container"
                ).show("slow");
              }
              pricingTabsContents.toggleClass("collapsed");
            });
          }
        });
    }
  };
})(jQuery, Drupal);

И теперь js код вообще не работает. А дебагинг в браузере показывает что не заходит во внутрь:

 $(".pricing .pricing-tabs-contents", context)
        .once("collapsedPricing")    
        .each(function() {  

Где я допустил ошибку?

Разметка:

<section class="pricing">
  <div class="pricing-tabs-container">
    <div class="pricing-tabs-contents collapsed">
      <div class="tab-content">
        <div class="title">...</div>
        <div class="text">...</div>
        <div class="blue-table-container">...</div>
      </div>
    </div>
  </div>
</section>

Суть функционала сделать блок .pricing-tabs-contents collapsible.

Комментарии