用jquery替换srcset大小

Question

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

ie:点击时，图像会从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()将参数选择器字符串"img"链接到.toggleClass()、.attr("sizes", /* value */)以在.photo-set元素中设置img元素的sizes属性。

​

  $(".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>

​