Changing SRC with data attribute doesn't work- js

Question

I'm trying to change src of an image with JS . I want to take the data attribute of another element and to place it on the src of the image:

This is the JS:

$(".color-click").click(function() {
    var selected = $('.color-click');
    var piccolor1 = selected.attr('data-pic1');

    $('#products-products-small').attr('src', piccolor1);
});

This is this is the element of the data attribute:

<button data-pic1="images\logo.ppg" id="circle" class="color-click"> </button>

This is the picture with the src that I want to change :

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

Because you are using a backslash instead of a forward slash in the data-pic1 value, and also you should use var selected = $(this);, otherwise it will refer to a collection of nodes. — Terry
– Terry, Commented Apr 3, 2018 at 14:31
try using $(this) instead of $('.color-click'); and try using selected.data('pic1'); instead of selected.attr('data-pic1'); and your directory separator is backwards (should be data-pic1="images/logo.ppg") also, you probably meant png instead of ppg. — I wrestled a bear once.
– I wrestled a bear once., Commented Apr 3, 2018 at 14:31
@Occam'sRazor .attr('data-pic1') works just fine, the problem can't be fixed by using .data('pic1') as they are functionally equivalent. — Terry
– Terry, Commented Apr 3, 2018 at 14:34
and if there's only one .color-click then using this won't solve the problem either. just noting general improvements, you noted the problem in your first comment so i didn't bother writing an answer. — I wrestled a bear once.
– I wrestled a bear once., Commented Apr 3, 2018 at 14:36

Terry · Accepted Answer · 2018-04-03 14:33:45Z

Because you are using a backslash \ instead of a forward slash / in the data-pic1 value (check the file path if it actually points to an actual image), and also you should use var selected = $(this);, otherwise it will refer to a collection of nodes. $(this) in the event handler ensures that you are referring to the actual element that triggered the event, instead of returning a collection of elements.

Here is a proof-of-concept that works:

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

rand0m · Accepted Answer · 2018-04-03 14:51:27Z

0

Is this what you're looking for ?

$(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/

answered Apr 3, 2018 at 14:51

rand0m

86110 silver badges24 bronze badges

Collectives™ on Stack Overflow

Changing SRC with data attribute doesn't work- js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related