用jQuery替换srcset大小onclick

debugcn 发表于 Dev

WeSort

在img正在使用的标签上，srcset我尝试启用50％宽度的图像，并在单击时变为100％。可以实现100％的宽度，togggleClass但我也需要更改其sizes内容srcset。我希望这将确保性能和适当的图像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>

来宾271314

您可以将.find()参数选择器字符串"img"链接到.toggleClass()，.attr("sizes", /* value */)以在element中设置element的sizes属性。img.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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。