Изменение SRC с атрибутом данных не работает - js
Я пытаюсь изменить src изображения с помощью JS. Я хочу взять атрибут данных другого элемента и поместить его в src изображения:
Это JS:
$(".color-click").click(function() {
var selected = $('.color-click');
var piccolor1 = selected.attr('data-pic1');
$('#products-products-small').attr('src', piccolor1);
});
Это элемент атрибута данных:
<button data-pic1 = "images\logo.ppg" id = "circle" class = "color-click"> </button>
Это изображение с src, которое я хочу изменить:
<img src = "images/logo22.png" data-name = "" class = "products-products-small clicked-prod num1" id = "products-products-small" onclick = "showImage('<?php product_image1_products() ?>');" alt = "header_bg">
попробуйте использовать $(this) вместо $('.color-click'); и попробуйте использовать selected.data('pic1'); вместо selected.attr('data-pic1');, и ваш разделитель каталогов также перевернут (должен быть data-pic1 = "images/logo.ppg"), вы, вероятно, имели в виду png вместо ppg.
@ Occam'sRazor .attr('data-pic1') работает нормально, проблема не может быть решена с помощью .data('pic1'), поскольку они функционально эквивалентны.
а если есть только один .color-click, то использование this тоже не решит проблему. просто отметив общие улучшения, вы отметили проблему в своем первом комментарии, поэтому я не стал писать ответ.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Поскольку вы используете обратную косую черту \ вместо прямой косой черты / в значении data-pic1 (проверьте путь к файлу, если он действительно указывает на фактическое изображение), а также вы должны использовать var selected = $(this);, иначе он будет ссылаться на набор узлов. $(this) в обработчике событий гарантирует, что вы ссылаетесь на фактический элемент, который инициировал событие, вместо того, чтобы возвращать коллекцию элементов.
Вот работающее доказательство концепции:
$(function() {
$(".color-click").click(function() {
var selected = $(this);
var piccolor1 = selected.attr('data-pic1');
$('#products-products-small').attr('src', piccolor1);
});
});<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-pic1 = "http://via.placeholder.com/350x150/B13131/FFF" id = "circle" class = "color-click"> Click me to change image</button>
<img src = "http://via.placeholder.com/350x150/" data-name = "" class = "products-products-small clicked-prod num1" id = "products-products-small" alt = "header_bg">Это то, что вы ищете?
$(function(){
// image element
var target = $(".products-products-small.num1");
// when button is clicked
$(".color-click").on("click", function(){
// get image
var src = $(this).data("img-src");
// set image
$(target).attr("src", src);
});
});
Потому что вы используете обратную косую черту вместо прямой в значении
data-pic1, а также вам следует использоватьvar selected = $(this);, иначе он будет ссылаться на набор узлов.