How can I delete an item according to a condition?
I have 3 attributes for my images data-web-src
, data-tablet-src
and data-mobil-src
, and I use this attribute to responsive.If my images do not have data-mobile-src attribute than the removal of the images on your mobile phone or tablet, or web-site .. and it works, but as shown below. I just want to do this in .slider
images only , how can I do this?
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>
+3
source to share
1 answer
How easy is it to replace body with .slider when calling noLazyImages?
Hope it helps.
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>
+2
source to share