javascript - 带有 if 的 html 属性控件

Question

我的 img 有 3 个属性，但如果有一个属性 (data-web-src,data-tablet-src,data-mobil-src) 而不是设置我的 src 而不是其中一个属性是可能的吗？

please click to see on codepen

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

$(document).ready(function() {
  noLazyImages("body img");
})

img {
  width: 300px;
}

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

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

Answer 1

我认为下面的代码可以满足您的需求。

我从问题片段中的 img 标签中删除了 data-tablet-src，这样您就可以运行两者并比较结果。

逻辑

如果 elData['tabletSrc'] 不存在，

if(elData['tabletSrc']) 将为 false。所以它将返回 return elData['webSrc']。

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

$(document).ready(function() {
  noLazyImages("body img");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="lazy_res" data-web-src="http://image.prntscr.com/image/bdf1d94b64104ef2acd2ceee19882cd1.jpg" data-mobil-src="http://image.prntscr.com/image/caa51ab4900448589201207e57b2630f.jpg"
/>