CODEWITHSUNDEEP
javascriptjqueryhtml
Diego Alves
Diego Alves

Reputation: 2669

How do I change data-magnify-src attribute of HTML element with jquery?

I've tried 

$(elem).prop('data-magnify-src', 'change')

$(elem).data('magnify-src', 'change')

This is my snippet. I hope I am not doing something dumb. I really thought it would work. 

 $().ready(function () {

    $('.img-miniatura').click(function(e){

   
    $('#bigImg').prop('data-magnify-src', 'new'  );


    });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
<img data-magnify-src="old" src="https://i.sstatic.net/uImwY.jpg?s=48&g=1" id="bigImg"/>
</div>

<div>
<div>click the image below and change the data attribute of the image above</div>
<img class='img-miniatura'  src="https://i.sstatic.net/uImwY.jpg?s=48&g=1"/>
</div>

Upvotes: 0

Views: 294

Answers (1)

Christopher Thrower
Christopher Thrower

Reputation: 730

You need to use .attr, not .prop

For example:

$(function(){
  $('.img-miniatura').click(function(e){
    $('#bigImg').attr('data-magnify-src', 'new');
  });
});

See here: https://jsfiddle.net/1hbkv75q/2/

Upvotes: 1

Related Questions