将 srcset sizes onclick 替换为 jquery

Question

在使用 srcset 的 img 标签上，我试图使 50% 宽度的图像在单击时变为 100%。 100% 宽度是通过 togggleClass 实现的，但我还需要更改 srcset 的 sizes 内容。我希望这将确保保留性能以及适当的图像 src 大小。

即：点击时，图像从sizes="(min-width: 29em) 50vw, 100vw"变为sizes="100vw"

<div class="photo-set col-1-1 bp2-col-1-2">
    <img src="..." srcset="..."
      sizes="(min-width: 29em) 50vw, 100vw">
</div>

<script>
  $(".photo-set").on('click', function() {
    $(this).toggleClass('full-width');
  });
</script>
<style>
  .bp2-col-1-2 {
    width: 50%;
  }
  .full-width {
    width: 100% !important;
  }
</style>

Answer 1

您可以将 .find() 与链接到 .toggleClass()、.attr("sizes", /* value */) 的参数选择器字符串 "img" 一起使用，以设置 img 的 sizes 属性.photo-set 元素中的元素。

  $(".photo-set").on('click', function() {
    $(this).toggleClass('full-width')
    .find("img").attr("sizes", "(min-width: 29em) 100vw, 100vw")
  });

  .bp2-col-1-2 {
    width: 50%;
  }
  .full-width {
    width: 100% !important;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="photo-set col-1-1 bp2-col-1-2">
    <img src="..." srcset="..."
      sizes="(min-width: 29em) 50vw, 100vw">
</div>

将 srcset sizes onclick 替换为 jquery

Replace srcset sizes onclick with jquery

jquery

srcset