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)确保您引用触发事件的实际元素，而不是返回元素集合。

这是一个有效的概念验证：

＆＃13;

$(function() {
  $(".color-click").click(function() {
    var selected = $(this);
    var piccolor1 = selected.attr('data-pic1');

    $('#products-products-small').attr('src', piccolor1);
  });
});

＆＃13;

<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">

＆＃13;

Answer 2

这是你正在寻找的吗？

$(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); 
    });
});

https://jsfiddle.net/fatgamer85/ta90wt33/2/

使用data属性更改SRC不起作用

2 个答案: