how to get and set data variable with jquery?

Question

my image has data-web-src, data-tablet-src and data-mobil-src if my img tag has .lazy_res class instead of .lazyload then set value of data-web-src to src on web, but if screen (or device) is tablet than set data-tablet-src value's to src I want to do this for all images on my web page but I can’t find a solution here you are my code

$(document).ready(function() {

  function noLazyImages(e) {
    var getWebSrc = $(e).attr("data-web-src");
    var getTabletSrc = $(e).attr("data-tablet-src");
    var getMobilSrc = $(e).attr("data-mobil-src");
    if ($(".box img").hasClass("lazy_res")) {

      if ($(window).width() > 960) {
        $(e).attr("src", getWebSrc);
      } else if ($(window).width() < 768) {
        $(e).attr("src", getTabletSrc);
      }else if ($(window).width() < 480) {
        $(e).attr("src", getMobilSrc);
      }

    } else {
      // do nothing..
    }

  }

  noLazyImages(".box img");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">

<img class="lazy_res" data-web-src="http://image.prntscr.com/image/bdf1d94b64104ef2acd2ceee19882cd1.jpg" data-mobil-src="http://image.prntscr.com/image/caa51ab4900448589201207e57b2630f.jpg" data-tablet-src="http://image.prntscr.com/image/4b2862a292b543139daa7805a58c17fd.jpg"/>
  
  
  
</div>

eh, there's nothing wrong with using .attr to access data-* attributes. It's even more performant than using jQuery's .data for them. — Kevin B, Feb 09 '17 at 20:26
Hi I haven't any problem with data attribute I just have some problem with my jquery I'm keen on and I'm a beginner on jquery how can I do what I want ? — ani_css, Feb 09 '17 at 20:28
@KevinB How is it faster to touch the DOM _every time_ than touching it once and using a JS object afterwards? — hashchange, Feb 09 '17 at 20:31
@hashchange depends on how often and how many times. .data does quite a bit in the background to figure out what each data attribute contains (is it json, a number, a boolean, etc). In this case performance isn't even a concern. My main point in that comment was that pointing to the .data documentation or similar so questions is irrelevant to this question. — Kevin B, Feb 09 '17 at 20:33

charlietfl · Accepted Answer · 2017-02-09T20:48:52.253

2

you need to loop over all of them and get and set instance specific values

Can do it using attr(function)

 function noLazyImages(e) {
   $(e + '.lazy_res').attr('src', function(_, oldSrc) {
     var elData = $(this).data(),
         winWidth = $(window).width();
     if (winWidth  > 960) {
       return elData['webSrc']
     } else if (winWidth  < 768 && winWidth >=480) {
       return elData['tabletSrc']
     } else if (winWidth  < 480) {
       return elData['mobilSrc']
     }
   })
 }

DEMO

edited Feb 09 '17 at 20:48

answered Feb 09 '17 at 20:36

charlietfl

170,828
13
121
150

thanks but nothing chane how can I apply for my code ? – ani_css Feb 09 '17 at 20:39
how to apply? Switch out the function. – charlietfl Feb 09 '17 at 20:40
I understand but I guess doesn't work I tried just now :) – ani_css Feb 09 '17 at 20:41
I try to understand function as I said before I'm new on jquery – ani_css Feb 09 '17 at 20:43
@KevinB wierd...getting all data camel cases hyphened property names...didn't know that. – charlietfl Feb 09 '17 at 20:47
thank you so much I have couple of question it work's just when I refresh page how can it work both resize window and width (for device) and where sall I wrote if statement for mobil ? (mobil-data-src is not work) I'm asking you to learn thank you so much – ani_css Feb 09 '17 at 20:53
1

I fixed mobile ...needed to change `if()` a bit see the `&& winWidth >=480`. Can call this inside a window resize handler if you want also – charlietfl Feb 09 '17 at 20:54
hey man thank you so much I will try to now understand codes now so so thank you – ani_css Feb 09 '17 at 21:42

how to get and set data variable with jquery?

1 Answers1