Здравствуйте! Не могу решить следующую задачу:
Есть товар различных размеров (S, S+, M, M+, L), а так же у него есть цвета.
Необходимо сделать следующее: по нажатию на размер - карусель слева менялась на изображения соответствующего размера, НО! так же при нажатии на определенный цвет, слева подгружались карусели с цветами ранее выбранного размера. Так же, желательно (но не обязательно) при нажатии на размер, ранее выбранный цвет оставался.
Изображение:
http://skrinshoter.ru/s/220618/I0e3J6qH?a
Код HTML:
<div class="row no-gutters">
<div class="col-md-5 col-lg-auto">
<div class="catalogue_sliders">
<div class="catalogue_parent">
<div class="catalogue_sliders__carousel" id="yellowS">
<div class="owl-carousel" id="catalogue_slider__one" data-slider-id="1">
<a href="img/catalogue/yellow/s/1.jpg">
<img class="catalogue_sliders__slide" src="img/icons/Icon_Magnifying.svg" alt="">
<img src="img/catalogue/yellow/s/1.jpg" alt="Желтый чемодан">
</a>
<a href="img/catalogue/yellow/s/2.jpg">
<img class="catalogue_sliders__slide" src="img/icons/Icon_Magnifying.svg" alt="">
<img src="img/catalogue/yellow/s/2.jpg" alt="Желтый чемодан">
</a>
<a href="img/catalogue/yellow/s/3.jpg">
<img class="catalogue_sliders__slide" src="img/icons/Icon_Magnifying.svg" alt="">
<img src="img/catalogue/yellow/s/3.jpg" alt="Желтый чемодан">
</a>
<a href="img/catalogue/yellow/s/4.jpg">
<img class="catalogue_sliders__slide" src="img/icons/Icon_Magnifying.svg" alt="">
<img src="img/catalogue/yellow/s/4.jpg" alt="Желтый чемодан">
</a>
</div>
<div class="owl-thumbs" data-slider-id="1">
<button class="owl-thumb-item"><img src="img/catalogue/yellow/s/1.jpg" alt="Желтый чемодан"></button>
<button class="owl-thumb-item"><img src="img/catalogue/yellow/s/2.jpg" alt="Желтый чемодан"></button>
<button class="owl-thumb-item"><img src="img/catalogue/yellow/s/3.jpg" alt="Желтый чемодан"></button>
<button class="owl-thumb-item"><img src="img/catalogue/yellow/s/4.jpg" alt="Желтый чемодан"></button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-7 col-lg-auto">
<div class="catalogue_options__size">
<h3>Выберите размер <span class="tab_art__two">(арт. 4353453)</span>:</h3>
<div class="catalogue_options__item">
<div class="row no-gutters align-items-md-center justify-content-md-between">
<div class="col-6 col-md-auto catalogue_options__short-one cat_opt__1">
<div class="catalogue_options__short catalogue_options__short-second active cat_opt_s" data-size="S">
S
</div>
</div>
<div class="col-6 col-md-auto catalogue_options__short-one cat_opt__2">
<div class="catalogue_options__short catalogue_options__short-second cat_opt_splus" data-size="">
S+
</div>
</div>
<div class="col-md-auto catalogue_options__long-one">
<div class="catalogue_options__long ">
<div class="row align-items-md-center">
<div class="col-4 col-md-auto">
<small>Объем:</small>
<small><b>37 литра</b></small>
</div>
<div class="col-4 col-md-auto">
<small>Вес:</small>
<small><b>2,5 кг</b></small>
</div>
<div class="col-4 col-md-auto">
<small>Габариты:</small>
<small><b>55x22x38 см</b></small>
</div>
<div class="col-md-auto">
<h4>2 590 руб.</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="catalogue_options__item catalogue_options__item-two">
<div class="row no-gutters align-items-center justify-content-md-between">
<div class="col-6 col-md-auto catalogue_options__short-two cat_opt__3">
<div class="catalogue_options__short catalogue_options__short-second cat_opt_m" data-size="">
M
</div>
</div>
<div class="col-6 col-md-auto catalogue_options__short-two cat_opt__4">
<div class="catalogue_options__short catalogue_options__short-second cat_opt_mplus" data-size="">
M+
</div>
</div>
<div class="col-md-auto catalogue_options__long-two">
<div class="catalogue_options__long">
<div class="row align-items-md-center">
<div class="col-4 col-md-auto">
<small>Объем:</small>
<small><b>56 литра</b></small>
</div>
<div class="col-4 col-md-auto">
<small>Вес:</small>
<small><b>3,5 кг</b></small>
</div>
<div class="col-4 col-md-auto">
<small>Габариты:</small>
<small><b>64x25x44 см</b></small>
</div>
<div class="col-md-auto">
<h4>2 790 руб.</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="catalogue_options__item">
<div class="row no-gutters align-items-center justify-content-md-between">
<div class="col-6 col-md-auto catalogue_options__short-three cat_opt__5">
<div class="catalogue_options__short catalogue_options__short-second cat_opt_l" data-size="">
L
</div>
</div>
<div class="col-md-auto catalogue_options__long-three">
<div class="catalogue_options__long">
<div class="row align-items-md-center">
<div class="col-4 col-md-auto">
<small>Объем:</small>
<small><b>89 литра</b></small>
</div>
<div class="col-4 col-md-auto">
<small>Вес:</small>
<small><b>3,8 кг</b></small>
</div>
<div class="col-4 col-md-auto">
<small>Габариты:</small>
<small><b>73x29x52 см</b></small>
</div>
<div class="col-md-auto">
<h4>3 290 руб.</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="airlines">
<div class="warn">!</div>
<p>Проходит в салон самолета (ручная кладь)</p>
</div>
</div>
<div class="catalogue_options__colors">
<div class="colors_parent">
<h3>Выберите цвет <span class="option_color__two active">(желтый)</span><span class="option_color__two">(красный)</span><span class="option_color__two">(серый)</span><span class="option_color__two">(оранжевый)</span><span class="option_color__two">(розовый)</span><span class="option_color__two">(черный)</span><span class="option_color__two">(зеленый)</span>:</h3>
</div>
<div class="color_par">
<div class="catalogue_options__color catalogue_options__color-second catalogue_options__color-yellow active" data-color="Желтый"></div>
<div class="catalogue_options__color catalogue_options__color-second catalogue_options__color-red" data-color="Красный"></div>
<div class="catalogue_options__color catalogue_options__color-second catalogue_options__color-l_grey" data-color="Серый"></div>
<div class="catalogue_options__color catalogue_options__color-second catalogue_options__color-orange" data-color="Оранжевый">
</div>
</div>
Удавалось реализовывать либо смену цвета, либо размера, но никак не сразу оба.
Далее была попытка реализовать через data-атрибуты:
$(".catalogue_options__color").click(function() {
var thisDataColor = $(this).data("color");
var dataSize = $(".catalogue_options__short").data("size");
if (thisDataColor == "Желтый" && dataSize === "S") {
$("#yellowS").show();
} else {
$("#catalogue_slider__carousel").hide();
}
});
Но никак.
Прошу помощи. Возможно как-то релизовать по другому получится?
