У меня есть два контейнера с размерами продукта класса. каждый из них содержит вариант выбора с двумя измерениями в дюймах и см. каждая из этих опций показывает таблицу дюймов и скрывает сантиметры и наоборот.
только с одним размером продукта мой 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>
Вы очень близки со своим кодом. Вам просто нужно убедиться, что элемент контейнера захвачен, чтобы вы могли отображать/скрывать только в предполагаемом контейнере .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 Как в этом случае затрагивается первая таблица? Слушатели change
не зависят друг от друга и влияют только на свои контейнеры, поэтому я не вижу, как один может влиять на другой. См.: jsfiddle.net/76484/csy8vpqn
отлично работает на скрипке, но если я внесу изменения в размер продукта номер два, чтобы просто иметь простую таблицу и удалить из нее выбор, первый из них повлияет. как сделать гибкой эту проблему?