CODEWITHSUNDEEP
jquery
Saint Robson
Saint Robson

Reputation: 5525

Changin data value using .data() and .attr() both failed

I have this code :

<li>
    <a href="#" id="bca">
      <img width="60" height="35" class="brand img-responsive" alt="logo" 
        src="view/backoffice/assets/img/form-wizard/bca.png"
        data-src-retina="view/backoffice/assets/img/form-wizard/[email protected]">
    </a>
</li>

and I have this jquery : 

$("#bri").click(function() {
    event.preventDefault();
    $("#bca").children().attr("src","view/backoffice/assets/img/form-wizard/bca-grey.png");
    $("#bca").children().attr("data-src-retina","view/backoffice/assets/img/form-wizard/[email protected]");  
});

why I can't change data-src-retina value using jquery? I tried to use another method like this but also failed :

$("#bri").click(function() {
    event.preventDefault();
    $("#bca").children().attr("src","view/backoffice/assets/img/form-wizard/bca-grey.png");
    $("#bca").children().data("src-retina","view/backoffice/assets/img/form-wizard/[email protected]");   
});

what did I do wrong here? thank you.

Upvotes: 0

Views: 31

Answers (1)

Diego Polido Santana
Diego Polido Santana

Reputation: 1435

Seems your code works fine:

$(document).ready(function() {
  $("#bri").click(function() {
    $("#bca").children().each(function() {
      alert("Old data-src-retina:" + $(this).attr("data-src-retina"));
    });
    event.preventDefault();
    $("#bca").children().attr("src", "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRE9BlrARaNurkqQCh1Y-CeyvAsqpFYVVUwIe_TpPhhJLglGK0aRHZuZw");
    $("#bca").children().attr("data-src-retina", "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRUc0zJ7TAI81eAL8sitUl81v409oihvi3fRfnnbyzTbhYAJC33");
    $("#bca").children().each(function() {
      alert("New data-src-retina:" + $(this).attr("data-src-retina"));
    });
  });
});

Plunker: https://plnkr.co/edit/mlyous7dosRl9IN9ds7U

Upvotes: 1

Related Questions