Question

我的图片有3个属性data-web-src，data-tablet-src和data-mobil-src，我使用theese属性进行自适应。如果我的图片没有data-mobile-src属性比移动或平板电脑或网络上删除此图像..它的工作，但如下图所示..我只想在.slider图像中执行此操作，我该怎么做？< / p>

＆＃13;

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'];
  });
}

$(window).resize(function() {
  noLazyImages("body img");
});
noLazyImages("body img");

＆＃13;

img {
  width: 300px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<img class="lazy_res" data-web-src="https://image.prntscr.com/image/0d2af672b40c4d9ebf113a1784c33a7f.png" data-mobil-src="https://image.prntscr.com/image/b1e10f433e404191bb78123f5188dc56.png" data-tablet-src="https://image.prntscr.com/image/a9fb88455946432890b27a946e99d387.png"/>

<img class="lazy_res" data-web-src="https://image.prntscr.com/image/0d2af672b40c4d9ebf113a1784c33a7f.png" data-tablet-src="https://image.prntscr.com/image/a9fb88455946432890b27a946e99d387.png"/>

<div class="slider">
  <div class="item">
  <a href="#"><img class="lazy_res" data-web-src="https://image.prntscr.com/image/0d2af672b40c4d9ebf113a1784c33a7f.png" data-mobil-src="https://image.prntscr.com/image/b1e10f433e404191bb78123f5188dc56.png" data-tablet-src="https://image.prntscr.com/image/a9fb88455946432890b27a946e99d387.png"/>
  </a>
  </div>
  <div class="item">
  <a href="#"><img class="lazy_res" data-web-src="https://image.prntscr.com/image/0d2af672b40c4d9ebf113a1784c33a7f.png" data-tablet-src="https://image.prntscr.com/image/a9fb88455946432890b27a946e99d387.png"/></a>
  </div>
</div>

＆＃13;

CodePen Demo

Answer 1

当你调用noLazyImages时，用.slider替换body怎么样？

希望这有帮助。

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'];
  });
}

$(window).resize(function() {
  noLazyImages(".slider img");
});
noLazyImages(".slider img");

img {
  width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<img class="lazy_res" data-web-src="https://image.prntscr.com/image/0d2af672b40c4d9ebf113a1784c33a7f.png" data-mobil-src="https://image.prntscr.com/image/b1e10f433e404191bb78123f5188dc56.png" data-tablet-src="https://image.prntscr.com/image/a9fb88455946432890b27a946e99d387.png"/>

<img class="lazy_res" data-web-src="https://image.prntscr.com/image/0d2af672b40c4d9ebf113a1784c33a7f.png" data-tablet-src="https://image.prntscr.com/image/a9fb88455946432890b27a946e99d387.png"/>

<div class="slider">
  <div class="item">
  <a href="#"><img class="lazy_res" data-web-src="https://image.prntscr.com/image/0d2af672b40c4d9ebf113a1784c33a7f.png" data-mobil-src="https://image.prntscr.com/image/b1e10f433e404191bb78123f5188dc56.png" data-tablet-src="https://image.prntscr.com/image/a9fb88455946432890b27a946e99d387.png"/>
  </a>
  </div>
  <div class="item">
  <a href="#"><img class="lazy_res" data-web-src="https://image.prntscr.com/image/0d2af672b40c4d9ebf113a1784c33a7f.png" data-tablet-src="https://image.prntscr.com/image/a9fb88455946432890b27a946e99d387.png"/></a>
  </div>
</div>

如何根据条件删除元素？

1 个答案: