Question

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

＆＃13;

$(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");
});

＆＃13;

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

＆＃13;

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获取和设置数据变量？

1 个答案: