Как использовать несколько таблиц с несколькими тегами выбора

У меня есть два контейнера с размерами продукта класса. каждый из них содержит вариант выбора с двумя измерениями в дюймах и см. каждая из этих опций показывает таблицу дюймов и скрывает сантиметры и наоборот.

только с одним размером продукта мой jquery работает нормально, но с двумя или более у меня проблемы. таблицы плохо срабатывают между дюймами и см, а контейнер № 2 даже не показывал таблицу.

может ли кто-нибудь сказать, как мне это исправить. также, если вы знаете о vanilla js, мне понравилось знать, как это сделать с js или если у вас есть какое-то другое решение, было бы неплохо.

$('.product-sizes').each(function () {
    $(this).find('.measurement').on('change', function () {
      $('.product-sizes__tab').hide();
      $('.product-sizes__tab').eq($(this).val()).show();
    }).trigger('change');
  });
.product-sizes{
    margin-top: 30px;
    padding: 15px 6px 6px;
    background: #fff;
    border: 2px solid #E6E6E6;
    border-radius: 12px;
}
.product-sizes__head{
    padding: 0 16px;
}
.product-sizes__head--title{
    font-size: 16px;
    color: black
}
.measurement{
    padding: 7px 10px;
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 6px;
}
.measurement,
.measurement select:focus>option:checked{
    color: blue;
}
.measurement--label{
    font-size: 16px;
    color: black
}
.product-sizes__tab{
    white-space: nowrap;
    overflow-x: auto;
}
.product-sizes__tab--th,
.product-sizes__tab--td{
    min-width: 200px;
    border-radius: 6px;
    margin: 8px 4px;
    overflow: hidden;
}
.product-sizes__tab--th,
.product-sizes__tab .product-sizes__tab--td:not(:first-child){
    text-align: center;
}
.product-sizes__tab--th{
    padding: 10px 8px;
    font-size: 16px;
    color: black;
    background: #E6E6E6;
}
.product-sizes__tab--td{
    padding: 10px 8px;
    font-size: 16px;
    background: #fff;
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous">
<div class = "product-sizes">
          <div class = "product-sizes__head d-flex justify-content-between align-items-center">
            <h3 class = "product-sizes__head--title">Available Sizes:</h3>
            <form class = "d-flex align-items-center">
              <label for = "measurement" class = "measurement--label me-3">Measurement:</label>
              <select class='measurement'>
                  <option value='1'>inches</option>
                  <option value='2'>centimeters</option>
              </select>
            </form>
          </div>
          <div class = "product-sizes__tabs">
            <div class = "product-sizes__tab active" id = "tab1">
              <ul class = "d-flex">
                <li class = "product-sizes__tab--th col">Item \ Size</li>
                <li class = "product-sizes__tab--th col">Length</li>
                <li class = "product-sizes__tab--th col">Suction Line</li>
                <li class = "product-sizes__tab--th col">Liquid Line</li>
                <li class = "product-sizes__tab--th col">Insulation Wall Thickness</li>
              </ul>
              <ul class = "d-flex">
                <li class = "product-sizes__tab--td col" style = "color: #7C4686; border-left: 6px solid #9B58A7;">CO50381438W</li>
                <li class = "product-sizes__tab--td col">50'</li>
                <li class = "product-sizes__tab--td col">3/8"</li>
                <li class = "product-sizes__tab--td col">1/4"</li>
                <li class = "product-sizes__tab--td col">3/8"</li>
              </ul>
              <ul class = "d-flex">
                <li class = "product-sizes__tab--td col" style = "color: #7C4686; border-left: 6px solid #9B58A7;">CO50381438W</li>
                <li class = "product-sizes__tab--td col">50'</li>
                <li class = "product-sizes__tab--td col">3/8"</li>
                <li class = "product-sizes__tab--td col">1/4"</li>
                <li class = "product-sizes__tab--td col">3/8"</li>
              </ul>
              <ul class = "d-flex">
                <li class = "product-sizes__tab--td col" style = "color: #7C4686; border-left: 6px solid #9B58A7;">CO50381438W</li>
                <li class = "product-sizes__tab--td col">50'</li>
                <li class = "product-sizes__tab--td col">3/8"</li>
                <li class = "product-sizes__tab--td col">1/4"</li>
                <li class = "product-sizes__tab--td col">3/8"</li>
              </ul>
            </div>
            <div class = "product-sizes__tab" id = "tab2">
              <ul class = "d-flex">
                <li class = "product-sizes__tab--th col">Item \ Size</li>
                <li class = "product-sizes__tab--th col">Length</li>
                <li class = "product-sizes__tab--th col">Suction Line</li>
                <li class = "product-sizes__tab--th col">Liquid Line</li>
                <li class = "product-sizes__tab--th col">Insulation Wall Thickness</li>
              </ul>
              <ul class = "d-flex">
                <li class = "product-sizes__tab--td col" style = "color: #7C4686; border-left: 6px solid #9B58A7;">CO50381438W</li>
                <li class = "product-sizes__tab--td col">cm</li>
                <li class = "product-sizes__tab--td col">cm</li>
                <li class = "product-sizes__tab--td col">cm</li>
                <li class = "product-sizes__tab--td col">cm</li>
              </ul>
              <ul class = "d-flex">
                <li class = "product-sizes__tab--td col" style = "color: #7C4686; border-left: 6px solid #9B58A7;">CO50381438W</li>
                <li class = "product-sizes__tab--td col">cm</li>
                <li class = "product-sizes__tab--td col">cm</li>
                <li class = "product-sizes__tab--td col">cm</li>
                <li class = "product-sizes__tab--td col">cm</li>
              </ul>
              <ul class = "d-flex">
                <li class = "product-sizes__tab--td col" style = "color: #7C4686; border-left: 6px solid #9B58A7;">CO50381438W</li>
                <li class = "product-sizes__tab--td col">50'</li>
                <li class = "product-sizes__tab--td col">3/8"</li>
                <li class = "product-sizes__tab--td col">1/4"</li>
                <li class = "product-sizes__tab--td col">3/8"</li>
              </ul>
            </div>
          </div>
        </div>
                <div class = "product-sizes">
          <div class = "product-sizes__head d-flex justify-content-between align-items-center">
            <h3 class = "product-sizes__head--title">Available Sizes:</h3>
            <form class = "d-flex align-items-center">
              <label for = "measurement" class = "measurement--label me-3">Measurement:</label>
              <select class='measurement'>
                  <option value='1'>inches</option>
                  <option value='2'>centimeters</option>
              </select>
            </form>
          </div>
          <div class = "product-sizes__tabs">
            <div class = "product-sizes__tab active" id = "ali1">
              <ul class = "d-flex">
                <li class = "product-sizes__tab--th col">Item \ Size</li>
                <li class = "product-sizes__tab--th col">Length</li>
                <li class = "product-sizes__tab--th col">Suction Line</li>
                <li class = "product-sizes__tab--th col">Liquid Line</li>
                <li class = "product-sizes__tab--th col">Insulation Wall Thickness</li>
              </ul>
              <ul class = "d-flex">
                <li class = "product-sizes__tab--td col" style = "color: #7C4686; border-left: 6px solid #9B58A7;">CO50381438W</li>
                <li class = "product-sizes__tab--td col">50'</li>
                <li class = "product-sizes__tab--td col">3/8"</li>
                <li class = "product-sizes__tab--td col">1/4"</li>
                <li class = "product-sizes__tab--td col">3/8"</li>
              </ul>
              <ul class = "d-flex">
                <li class = "product-sizes__tab--td col" style = "color: #7C4686; border-left: 6px solid #9B58A7;">CO50381438W</li>
                <li class = "product-sizes__tab--td col">50'</li>
                <li class = "product-sizes__tab--td col">3/8"</li>
                <li class = "product-sizes__tab--td col">1/4"</li>
                <li class = "product-sizes__tab--td col">3/8"</li>
              </ul>
              <ul class = "d-flex">
                <li class = "product-sizes__tab--td col" style = "color: #7C4686; border-left: 6px solid #9B58A7;">CO50381438W</li>
                <li class = "product-sizes__tab--td col">50'</li>
                <li class = "product-sizes__tab--td col">3/8"</li>
                <li class = "product-sizes__tab--td col">1/4"</li>
                <li class = "product-sizes__tab--td col">3/8"</li>
              </ul>
            </div>
            <div class = "product-sizes__tab" id = "ali2">
              <ul class = "d-flex">
                <li class = "product-sizes__tab--th col">Item \ Size</li>
                <li class = "product-sizes__tab--th col">Length</li>
                <li class = "product-sizes__tab--th col">Suction Line</li>
                <li class = "product-sizes__tab--th col">Liquid Line</li>
                <li class = "product-sizes__tab--th col">Insulation Wall Thickness</li>
              </ul>
              <ul class = "d-flex">
                <li class = "product-sizes__tab--td col" style = "color: #7C4686; border-left: 6px solid #9B58A7;">CO50381438W</li>
                <li class = "product-sizes__tab--td col">cm</li>
                <li class = "product-sizes__tab--td col">cm</li>
                <li class = "product-sizes__tab--td col">cm</li>
                <li class = "product-sizes__tab--td col">cm</li>
              </ul>
              <ul class = "d-flex">
                <li class = "product-sizes__tab--td col" style = "color: #7C4686; border-left: 6px solid #9B58A7;">CO50381438W</li>
                <li class = "product-sizes__tab--td col">cm</li>
                <li class = "product-sizes__tab--td col">cm</li>
                <li class = "product-sizes__tab--td col">cm</li>
                <li class = "product-sizes__tab--td col">cm</li>
              </ul>
              <ul class = "d-flex">
                <li class = "product-sizes__tab--td col" style = "color: #7C4686; border-left: 6px solid #9B58A7;">CO50381438W</li>
                <li class = "product-sizes__tab--td col">50'</li>
                <li class = "product-sizes__tab--td col">3/8"</li>
                <li class = "product-sizes__tab--td col">1/4"</li>
                <li class = "product-sizes__tab--td col">3/8"</li>
              </ul>
            </div>
          </div>
        </div>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
53
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы очень близки со своим кодом. Вам просто нужно убедиться, что элемент контейнера захвачен, чтобы вы могли отображать/скрывать только в предполагаемом контейнере .product-sizes.

Мне нравится ваша идея перебирать каждый .product-sizes, но я возьму ссылку на элемент. В обработчике change я буду использовать эту ссылку для перебора вкладок, которые являются потомками затронутого контейнера. Я буду использовать метод jQuery .toggle, чтобы определить, показывать ли вкладку, на основе ее индекса.

Окончательный код выглядит так:

$('.product-sizes').each(function () {
  const $container = $(this);
  
  $container.on('change', '.measurement', function () {
    // subtract 1 b/c array index are 0-based
    const activeTabIndex = Number($(this).val()) - 1;

    $container.find('.product-sizes__tab').each(function () {
      const $this = $(this);
      const isActive = $this.index() === activeTabIndex;
      
      $this.toggle(isActive);
      $this.toggleClass('active', isActive);
    })
  });
});

Вот пример скрипки.

Я думаю, что если вы уже загрузили jQuery, то лучше использовать jQuery вместо vanilla JS. Ванильная версия будет тяжелее и менее читабельна.

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

Alipvd 17.02.2023 08:58

@Alipvd Как в этом случае затрагивается первая таблица? Слушатели change не зависят друг от друга и влияют только на свои контейнеры, поэтому я не вижу, как один может влиять на другой. См.: jsfiddle.net/76484/csy8vpqn

76484 17.02.2023 12:46

Другие вопросы по теме