Javascript 使用数据属性更改SRC不会'；t工作-js

我正在尝试用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">

”）；“alt=“header\u bg”>

因为在

data-pic1

值中使用反斜杠

\

而不是正斜杠

/

（如果文件路径实际指向实际图像，请检查文件路径），而且还应该使用

var selected=$（此）；

，否则它将引用节点集合。

$（此）

在事件处理程序中，确保引用触发事件的实际元素，而不是返回元素集合

以下是一个有效的概念证明：

$（函数（）{
$（“.color click”）。单击（函数（）{
所选变量=$（此值）；
var piccolor1=selected.attr（'data-pic1'）；
$（'products small'）.attr（'src'，piccolor1）；
});
})；

单击我以更改图像

这就是你要找的吗

$(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）；

，否则它将引用节点集合。请尝试使用

$（this）

而不是

$（'.color click'）；

并尝试使用

selected.data（'pic1'））

而不是

选中的.attr（'data-pic1'）；

并且您的目录分隔符是向后的（应该是

data-pic1=“images/logo.ppg”

）此外，您可能是指

png

而不是

ppg

@Occam'sRazor

。attr（'data-pic1'）

工作很好，使用

数据（'pic1'）无法解决问题

因为它们在功能上是等效的。如果只有一个

。请单击“颜色”

，然后使用

此

也不会解决问题。只需注意一般性的改进，您在第一条评论中就注意到了问题，因此我没有费心写答案。