条件によって要素を削除するには？

Question

私の画像に3つの属性があります。data-web-src、data-tablet-src、data-mobil-srcです。レスキューにはtheese属性が使用されています。画像にはmobile-or-src-src属性がありません。それは仕事ですが、下の例を参照してください。私はちょうどこれを行うには.sliderイメージでしたいですか？あなたがnoLazyImagesを呼び出すときだけ.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

どのように？

これが役に立ちます。

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>