javascript - 使用数据属性更改 SRC 不起作用 - js

Question

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

Answer 1

因为您在 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">