javascript - 在 Responsive 上用另一个 img 属性更改 img src

Question

我在示例代码中为 img 标签创建了一个属性，例如 data-tablet、data-mobil

<div class="myDiv">
 <img  src="img-1.jpg" data-tablet="img-2.jpg" data-mobil="img-3.jpg">
</div>

我想如果我的平板电脑的屏幕更改我的 img src 更改为 data-tablet 或者我的屏幕用于 mobil 我的 src 必须更改为 data-mobil

我的JS

$(document).ready(function(){

    $(window).resize(function(){
      var tabletSrc = $(".main-carousel img").attr("data-tablet");
      var mobilSrc = $(".main-carousel img").attr("data-mobil");
      if($(window).width() <=768){

         $('img').attr('src',tabletSrc);
      }
      if($(window).width() <=480 ) {
         $('img').attr('src',mobilSrc);
      }
  });

});

click to see my works

问题是如果你点击你将看不到任何效果，我该怎么做我想要的

注意:我不想使用 srcset 或 css

Answer 1

请看这个CodePen对于工作版本。

您的代码存在一些问题:

• 手机和平板电脑的案例都是在移动案例中执行的。
• $(".main-carousel img") 是图像的集合。相反，您可能想要对单个图像进行操作。这可以在 .each() 的帮助下完成。

相关代码如下:

$(window).resize(function() {
  if ($(window).width() <= 480) {
    $('img').each(function() {
      $(this).attr('src', $(this).attr('data-mobil'));
    });
  } else if ($(window).width() <= 768) {
    $('img').each(function() {
      $(this).attr('src', $(this).attr('data-tablet'));
    });
  }
});