Блог

Главная - Вопросы по программированию - Использование FacetWP и желание скрыть дополнительные грани до тех пор, пока не будет выбран первый

Использование FacetWP и желание скрыть дополнительные грани до тех пор, пока не будет выбран первый

#javascript #jquery #css #facetwp

Вопрос:

Поэтому, используя FacetWP, я вижу, как вы можете скрыть шаблон результатов, пока не выберете фасет, настроив CSS с дополнительным классом, который вы добавляете, как только что-то выбрано.

Я также хотел скрыть 3 из 4 аспектов, пока кто-нибудь не сделает выбор из первого. Поэтому я попытался адаптировать этот код, но безуспешно.

 <script>
(function($) {
  $(document).ready(function() {
  $('.facetwp-dropdown').on('change', function() {
    var selectedOption = $(this).val();
    if (selectedOption === 'become-part-of-a-brand' || 'buy-an-existing-business'|| 'self-help-components-approach') {
      $('.facetwp-facet-business_area').addClass('visible');
      $('.facetwp-facet-activity').addClass('visible');
      $('.facetwp-facet-star_rating').addClass('visible');
    }
  });
})(jQuery);
</script>

Это, очевидно, имеет соответствующий CSS:

 .facetwp-facet-opportunity_area {display: block;}
.facetwp-facet-business_area {display: none;}
.facetwp-facet-business_area.visible {display: block;}
.facetwp-facet-activity {display: none;}
.facetwp-facet-activity.visible {display: block;}
.facetwp-facet-star_rating {display: none;}
.facetwp-facet-star_rating.visible {display: block;}

Я знаю, что упускаю что-то ослепительно очевидное, но Javascript не является моей сильной стороной… в принципе, как только выпадающий список, на который я ссылаюсь, изменится на любое другое значение, я хочу, чтобы добавление класса сработало, чтобы они стали видимыми…

Любая помощь будет принята с благодарностью.

Ура всем,

Грабить.

Редактировать:

Я также попробовал следующее:

     add_action( 'wp_head', function() {
    ?>
    <script>
    (function($) {
        $(document).on('facetwp-loaded', function() {
        if (FWP.loaded) {
          $('.facetwp-template').addClass('visible');
          $('.facetwp-facet-business_area').addClass('visible');
          $('.facetwp-facet-activity').addClass('visible');
          $('.facetwp-facet-star_rating').addClass('visible');
        }
      });
    })(jQuery);
    </script>
    <?php
    }, 100 );[/code]

Но это тоже не работает… (эта правка предназначена для того, чтобы помочь Мультани, который спрашивал ниже…

Комментарии:

1. Не могли бы вы также поделиться HTML-кодом?

2. Это сайт на WordPress… Я не писал никакого HTML. Я использовал это руководство facetwp.com/how-to-hide-the-template-until-facets-are-selected чтобы помочь мне скрыть шаблон до тех пор, пока я не выберу какую-либо грань, но на самом деле я хочу ограничить грани, чтобы отображалась только первая, пока пользователь не выберет…

3. Я на самом деле попробовал следующее на основе их кода выше, а также: add_action( ‘wp_head’, функция() { ?> ><скрипт> (функция($) { $(документ).on(‘загруженный facetwp’, функция() { если (загруженный FWP) {$(‘. шаблон facetwp’). addClass(‘видимый’); $(‘. facetwp-фасет-область бизнеса’). addClass(‘видимый’); $(‘. facetwp-фасет-активность’). Добавить класс(‘видимый’); $(‘. facetwp-facet-star_rating’). Добавить класс(‘видимый’); } }); })(jQuery); <скрипт></скрипт> </скрипт>;

4. Извините, я изо всех сил пытаюсь заставить форматирование работать в комментариях…

5. Я добавил альтернативный код, который я пробовал, который был прямым редактированием кода по ссылке, которую я дал…

Метки: ,