根据条件如何删除元素？

Question

根据条件如何删除元素？

3

我有三个属性用于我的图像，分别是data-web-src、data-tablet-src和data-mobile-src，我使用这些属性来实现响应式效果。如果我的图像没有data-mobile-src属性，则在移动设备、平板电脑或Web上删除该图像。这个方法可以实现，但是如下面的例子所示，我只想对.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

- ani_css

使用可用的picturefill polyfill。 - zzzzBov

首先，您需要创建和加载图像标签，然后创建一个滑块。使用sliderjs制作响应式滑块：http://www.slidesjs.com - Saleh Mosleh

我不需要另一个滑块，我想它可以用jquery处理。 - ani_css

@ani_css，你使用框架吗？比如Bootstrap或Materialize！？ - Saleh Mosleh

我正在使用Bootstrap :) - ani_css

显示剩余4条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nineoclick · Accepted Answer

当您调用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>