我正在尝试使用 JS 更改图像的 src 。 我想获取另一个元素的 data 属性并将其放置在图像的 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">
最佳答案
因为您在 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">
关于javascript - 使用数据属性更改 SRC 不起作用 - js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49632576/