Как измененить картинки при наведение на цвет?

Question

[Роман Танков]

Проблемка такая на странице есть 9 картинок, про наведению на цвета под картинками, картинка должна меняться, сделал так

<div class="col-md-4">
									<div class="holder">			
										<a href="#cart_tovara_1" class="buttons">
											<div class="tovar">
												<img src="/imag/catalog/001/bel.jpg" alt="Fytbolkin">
												<span class="knop_zakazat">Заказать</span>
												<div class="tovar_info">
													<h3>Никто кроме нас</h3>
													840<i class="fa fa-rub" aria-hidden="true"></i>
												</div>
												<div class="blok_color_mini">
													<ul>
														<li tkey="white" data-title="белый цвет" class="active" data-url="imag/catalog/001/bel.jpg"><span style="background:#FFFFFF;"></span></li>
														<li tkey="blue" data-title="синий цвет" data-url="imag/catalog/001/sin.jpg"><span style="background:#1400ad;"></span></li>
														<li tkey="green"  data-title="зеленый цвет" data-url="imag/catalog/001/zel.jpg"><span style="background:#10c81d;"></span></li>
														<li tkey="lightgray" data-title="Серый цвет" data-url="imag/catalog/001/ser.jpg">
													</ul>
												</div>	
											</div>	
										</a>
									</div>
								</div>

								<div class="col-md-4">
									<div class="holder">			
										<a href="#cart_tovara_2" class="buttons">
											<div class="tovar">
												<img src="/imag/catalog/002/ser.jpg" >
												<span class="knop_zakazat">Заказать</span>
												<div class="tovar_info">
													<h3>С нами бог</h3>
													770<i class="fa fa-rub" aria-hidden="true"></i>
												</div>
												<div class="blok_color_mini">
													<ul>
														<li tkey="white" data-title="белый цвет"  data-url="imag/catalog/002/bel.jpg"><span style="background:#FFFFFF;"></span></li>
														<li tkey="green"  data-title="зеленый цвет" data-url="imag/catalog/002/zel.jpg"><span style="background:#10c81d;"></span></li>
														<li tkey="lightgray" class="active"data-title="Серый цвет" data-url="imag/catalog/002/ser.jpg"><span style="background:#b0b0b0;"></span></li>
													</ul>
												</div>
											</div>	
										</a>
									</div>
								</div>
И т.п.

$(".blok_color_mini>ul>li").hover(function() {
    $(".white img:first").attr("src", $(this).data("url"));
  });

Но при наведение на любой цвет, картинка меняется у всех сразу или если добавить :first меняется только у первого. Как сделать?

Вот что получается

Answer 1

[Алексей Самсонов]

$(".blok_color_mini>ul>li").hover(function(e) {
    $(e.target).closest("img").attr("src", $(this).data("url"));
  });

вроде вот так должно заработать

Если что-то не выходит - смотрите документацию по closest и разбирайтесь сами :)
https://api.jquery.com/closest/

Comments

[Алексей Самсонов]

а вобще, лучше вешать один лисенер на дивку в которой все товары, и уже по event.target парсить внутри.
А то у вас так висит куча одинаковых лисенеров.

И не помню почему, но вроде лучше вместо .click/.hover писать .on('click', function() {})/.on('hover', function() {})

[Роман Танков]

$(".blok_color_mini>ul>li").hover(function() {
$(this).closest("img").attr("src", $(this).data("url"));
});
Не пашет.

Всё товары в одном диви и так, просто не стал его писать тут. Только ума не хватает как их спарсить.

[Алексей Самсонов]

не знаю что у вас там в this.
но у меня на подобной разметке реагирует что надо.
попробуйте через e.target, ответ отредактировал

[Алексей Самсонов]

Роман Танков: добавил линк на документацию.
closest - это то что вам нужно, другая проблема что может я не до конца вник в вашу верстку.

[Роман Танков]

Алексей Самсонов: спасибо!
посмотрел сделал выводы переписал
$(.blok_color_mini>ul>li).on( "hover", function( event ) {
$( event.target ).closest( ".vetrina img" ).attr("src", $(this).data("url"));
});
.vetrina это див где все товары
Но всё ровно что-то не так. Будьте так добры посмотрите, может я что-то пропустил. Просто 24 часа уже над этом думаю башка уже не моя

[Алексей Самсонов]

Роман Танков: "что-то не так" это не определение)
что именно не так?

[Роман Танков]

Алексей Самсонов: не работает

[Алексей Самсонов]

Роман Танков: это не ответ)
есть debugger, на крайняк console.log. Иначе я все равно не могу по вашему "описанию" понять что не работает, и почему.
и в целом не надо писать ".vetrina img". Можете написать просто "img", но если вдруг изобржаений станет больше, то добавьте нужным класс, к примеру:

и тогда ищите closest('.changable')

[Алексей Самсонов]

Роман Танков: дак при чем тут ошибки.
поставьте дебагер в лисенер, проследите что бы все селекторы выбирали нужные DOM-элементы и аттрибуты.

сделайте аля:
debugger;
var el = $(e.target);
var image = el.closest('img');
var newSrc = $(e.target).data("url");
image.attr('src', newSrc);

и пошагово посмотрите то ли кладется в соответствующие переменные. Нет - там же в дебагере в watch проверяйте и ищите нужные селекторы.

[Алексей Самсонов]

Роман Танков: заработало?
разобрались в чем косяк был?

[Алексей Самсонов]

Роман Танков: просто если заработало - был бы рад галочке у ответа ;)

[Роман Танков]

Алексей Самсонов: не могу, скоро ублюсь об бок, тупо. Но галочку поставил.

[Роман Танков]

Алексей Самсонов: аля пишет object Object

Answer 2

[Иван]

Мм, чем бороться со сложными подчинениями css, проще набросать простейшую функцию на JS.

Answer 3

[lega]

jsfiddle.net/lega911/om6qsvd6