Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.06.2018, 11:11
Новичок на форуме
Отправить личное сообщение для Dv1zhok Посмотреть профиль Найти все сообщения от Dv1zhok
 
Регистрация: 22.06.2018
Сообщений: 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();
		}
	});


Но никак.
Прошу помощи. Возможно как-то релизовать по другому получится?
Изображения:
Тип файла: jpg Скриншот 2018-06-22 11_04_18.jpg (15.5 Кб, 6 просмотров)

Последний раз редактировалось Dv1zhok, 22.06.2018 в 11:18.
Ответить с цитированием
  #2 (permalink)  
Старый 22.06.2018, 18:49
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Dv1zhok,
Написать функцию с двумя параметрами: color и size, в которой показывать товары с выбранными параметрами - остальные прятать.
Вызывать эту функцию в обработчиках смены размера и цвета.
В качестве параметров передавать currentColor и currentSize, описанные в глобальной области и получающие значения в соответствующих обработчиках.
Ответить с цитированием
  #3 (permalink)  
Старый 22.06.2018, 19:05
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Я так понял у вас все по папкам
<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>


как вариант
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена стран по клику / js theinstagib Общие вопросы Javascript 0 29.04.2017 13:28
Смена div по клику kingstakh jQuery 4 20.02.2017 13:18
Что-то не работает: смена картинки по клику. pro_moscow Элементы интерфейса 4 05.08.2016 05:01
Смена фонового изображения по кругу, по клику на одну кнопку Manoftheyear Элементы интерфейса 7 21.03.2016 05:45
Смена класса по клику, слайдер блоков Дмитрий123 Общие вопросы Javascript 2 04.02.2016 21:28