如何使用 jquery 获取和设置数据变量？

Question

我的图片有 data-web-src、data-tablet-src 和 data-mobil-src 如果我的 img 标签有 .lazy_res class 而不是 .lazyload 然后设置值在网络上 data-web-src 到 src，但如果屏幕（或设备）是平板电脑而不是将 data-tablet-src 值设置为 src 我想对我网页上的所有图像执行此操作但我在这里找不到解决方案你是我的代码

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

Answer 1

您需要遍历所有这些并获取和设置实例特定值

可以使用 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

如何使用 jquery 获取和设置数据变量？

how to get and set data variable with jquery?

html

javascript

jquery

responsive