如何根據條件去除元素？

我有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感謝您的幫助 –

如何根據條件去除元素？

回答

相關問題