javascript - jquery，点击放大图片，然后点击agian让它回到以前的宽度

Question

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<img src="https://i0.wp.com/www.thekitchenwhisperer.net/wp-content/uploads/2014/04/BelgianWaffles8.jpg" width="100" class="image" />

<script>
  $(document).ready(function() {
    $('.image').click(function() {
      $(this).css('width', '100%'); // original width is 500px 
    });
  });
</script>

如何添加一些代码以便我再次单击它，它会回到以前的宽度（100px）？

Answer 1

像这样？

 $(document).ready(function(){
        $('.image').click(function(){
             $(this).css('width', function(_ , cur){
                  return cur === '100px' ? '100%' : '100px'
            });  
        });
    });

小提琴

Answer 2

首先，我会将您的 img的width属性替换为CSS。接下来，您可以通过调用删除分配的 inline-css （这是 jQuery 添加的）

$(this).css('width', '');