Смена цветов и размеров по клику
Вложений: 1
Здравствуйте! Не могу решить следующую задачу:
Есть товар различных размеров (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(); } }); Но никак. Прошу помощи. Возможно как-то релизовать по другому получится? |
Dv1zhok,
Написать функцию с двумя параметрами: color и size, в которой показывать товары с выбранными параметрами - остальные прятать. Вызывать эту функцию в обработчиках смены размера и цвета. В качестве параметров передавать currentColor и currentSize, описанные в глобальной области и получающие значения в соответствующих обработчиках. |
Я так понял у вас все по папкам
<img src=""> <select> <option value="red">красный</option> <option value="blue">синий</option> <option value="green">зеленый</option> </select> <select> <option value="small">маленький</option> <option value="mid">средний</option> <option value="big">большой</option> </select> <script> var sel = document.querySelectorAll('select'); sel.forEach(el=>el.onchange = e => document.querySelector('img').src = 'img/'+sel[0].value+'/'+sel[1].value+'/img.jpg'); </script> как вариант |
Часовой пояс GMT +3, время: 23:05. |