Javascript Отразить «текущую» вкладку на другую вкладку | WebFlow - PullRequest
Новая
       154

Javascript Отразить «текущую» вкладку на другую вкладку | WebFlow

1 голос
/ 29 апреля 2020

Я создал виджет в Webflow, который работает, но дизайн UX не самый лучший, и для того, чтобы улучшить его, мне нужна помощь с некоторыми js. Вот небольшой обзор виджета, чтобы вы поняли, что я имею в виду:

Цель этого виджета - позволить пользователям: а) просматривать категории наших продуктов и продолжать просматривать варианты продуктов; б) просматривать эстетику c различия между нашими предлагаемыми типами зданий (сборные и контейнерные), а также позволяют пользователю сравнивать типы зданий для каждой категории, следуя «сравнить» CTA

Gif of Widget

У нас есть 5 категорий продуктов в 2 различных типах зданий: сборные и контейнерные. У меня есть 2 вкладки для переключения между типами зданий, а затем внутри содержимого этих вкладок, у меня есть 5 вкладок категории: жилое пространство, переносные офисы, коммунальные услуги, отдых и хранение. Содержимое этих вкладок - это изображение и CTA слева.

Моя проблема в , выбранная пользователем категория продукта не соответствует другому типу здания. Например, если вы выбрали офисные помещения на вкладке сборных конструкций и переключились на вкладку контейнера, будет выбрана совершенно другая категория продуктов.

Как это должно работать

Мне удалось отразить выбранную категорию готового продукта на вкладке контейнера, используя эту основу c logi c: 

<script>
//prefab
$(document).ready(function() {
  $('.livingprefab').click(function() {
    $(this).addClass('current');
    $('.livingcontainer').trigger('tap');
 });
  $('.storageprefab').click(function() {
    $(this).addClass('current');
    $('.storagecontainer').trigger('tap');
 });
  $('.utilityprefab').click(function() {
    $(this).addClass('current');
    $('.utilitycontainer').trigger('tap');
 });
  $('.officeprefab').click(function() {
    $(this).addClass('current');
    $('.officecontainer').trigger('tap');
 });
  $('.recprefab').click(function() {
    $(this).addClass('current');
    $('.reccontainer').trigger('tap');
 });
});
</script>

Теперь это работает, но когда я пытаюсь добавить противоположное (выбранные продукты на зеркале на вкладке контейнера на сборную сторону), все ломается. Почему это? Как я могу это исправить?

PS Это буквально мой второй раз, касающийся js, поэтому код, вероятно, далек от лучшей практики. Я UX-дизайнер, пытающийся перейти к разработке, поэтому, если у вас есть какой-либо совет, я бы с удовольствием его прочитал.

Редактировать: Вот моя ссылка на веб-поток только для чтения

1 Ответ

0 голосов
/ 30 апреля 2020

Приведенный выше код автоматически приводит к автоматическому c клику / касанию продукта контейнера сразу после того, как происходит щелчок по соответствующему сборному продукту с использованием метода trigger.

Если вы копируете этот код в обратном порядке как вы предлагаете, автоматическое нажатие / нажатие c также будет происходить с готовым продуктом сразу после нажатия на соответствующий контейнерный продукт. Итак, вместе они создали бы бесконечный рекурсивный клик l oop, и я бы предположил, что все сломается.

Вместо того, чтобы кликать по одному продукту, автоматически c нажимает / нажимает на соответствующего продукта, я предлагаю вам использовать события нажатия / нажатия только для пары продуктов, чтобы вносить изменения непосредственно в классы соответствующих элементов. Я бы не стал инициировать дополнительные события нажатия / нажатия, и при этом вы избежите таких рекурсивных проблем. И, похоже, что вы переключаете один и тот же класс на пару соответствующих продуктов, вы можете применить одну и ту же функцию к обоим, чтобы избежать дублирования кода.

Трудно быть точным, не видя остальной код и HTML, но что-то вроде: 

function makeLivingCurrent() {
    $('.livingprefab').addClass('current');
    $('.livingcurrent').addClass('current');
}
$('.livingprefab, .livingcurrent').click( makeLivingCurrent )

и т. д.

...