javascript - 如何根据条件删除元素？

Question

我的图像有 3 个属性，分别是 data-web-src、data-tablet-src 和 data-mobil-src 以及我正在使用 theese 属性进行响应。如果我的图像没有 data-mobile-src 属性而不是在移动设备或平板电脑或网络上删除此图像..它是有效的，但正如您在下面的示例中看到的那样..我只想做这在 .slider 图像中，我该怎么做？

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");

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>

CodePen Demo

Answer 1

调用 noLazyImages 时，将 body 替换为 .slider 怎么样？

希望这对您有所帮助。

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>