如何根据条件去除元素？

我有3个属性为我的图像是data-web-src,data-tablet-src和data-mobil-src，我使用theese属性作为响应。如果我的图像没有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

来源

2017-06-13 ani_css

使用具有多个源元素的图像元素。你不需要这样重新发明轮子。 – zzzzBov

，但图片元素不适用于旧浏览器：// –

使用可用的图片填充填充。 – zzzzBov

怎么样只是.slider更换身体，当你调用noLazyImages？

希望这会有所帮助。

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>

来源

2017-06-13 12:05:15 Nineoclick

谢谢我试过这种方式，但我想它不会响应另一个不在'.slider'里面的图像，所以有什么方法可以删除图像？如果图片没有任何属性 –

您问“我只是想在.slider图片中做这个，我该怎么做？”我回答了你的问题。也许你需要调整你的jQuery功能并且玩弄它。 – Nineoclick

我的意思是，如果我的任何图像没有'data-mobil-src'或'data-tablet-src'，那么不会显示这些图像或移动设备或在平板电脑上这样做只能用于.slider感谢您的帮助 –

如何根据条件去除元素？

回答

相关问题