Jquery 单击时切换尺寸img

我有一个图像列表，高度为250像素，带有class product

如果我点击图像，它必须变成500像素。
如果我再次单击图像，它必须返回250px。
如果我再次点击，它一定会变成500像素

所以基本上我想在图像的高度之间切换

我所拥有的

<script>
 $(document).ready(function(){
       
       $('.product').click(function()
       {
    
          $(this).css("cursor","pointer");
          $(this).animate({height: "500px"}, 'fast');
       });
     
     $('.product').dblclick(function()
       {
    
          $(this).css("cursor","pointer");
          $(this).animate({height: "250px"}, 'fast');
       });

   });
</script>

$（文档）.ready（函数（）{
$（'.product'）。单击（函数（）
{
$（this.css（“游标”、“指针”）；
动画（{height:'500px}，'fast'）；
});
$（'.product'）.dblclick（函数（）
{
$（this.css（“游标”、“指针”）；
动画（{height:'250px}，'fast'）；
});
});

这会使图像在单击时变大，在双击时变小

但我想在图像为500px时执行双击操作

如果我点击另一张图片，所有500px的图片必须再次变为250，因此只有一张500px的图片

---

实现这一目标的最佳方式是什么？if-else语句，或者是否可以切换高度？

首先，在CSS中设置

光标：指针
样式

然后为切换效果使用一个标志：

$(document).ready(function(){
   var flag = true;
   $('.product').click(function() {
       $(this).stop().animate({height: (flag ? "500px" : "250px") }, 'fast');
       flag = !flag;
   });
 });


编辑：

对于多个图像，使用
data（）
可能是更好的方法，我将介绍如何使具有相同类的其他图像变小

$(document).ready(function(){
     $('.product').click(function () {
        $('.product').not(this).animate({height: "250px"}, 'fast');
        var $this = $(this),
            flag = !$this.data('flag');

        $this.stop().animate({height: (flag ? "500px" : "250px")}, 'fast')
             .data('flag', flag);
      });
});

为单击指定一个变量1，为取消单击指定一个变量0，然后使用。单击功能，如下所示：

$(document).ready(function(){
TriggerClick = 0;

$(".product").click(function(){
 if(TriggerClick==0){
     TriggerClick=1;
     $("div#test").animate({width:'100px'}, 500);
 }else{
     TriggerClick=0;
     $("div#test").animate({width:'300px'}, 500);
 };
 });
});

您可以尝试将dblclick侦听器置于单击动画的就绪状态。因此，它只能在单击“动画”为“全局变量”时触发。只有当页面上只有一个这样的图像时，这种方法才有效。切换
$（this）.data（'flag'）
，以便更好地控制@Blazemonger—它不是真正的全局性的，它在DOM就绪函数的范围内；）。我确实同意使用data（），但向新手解释这种方法要容易得多。但他确实指定了他有一个“图像列表”，而不是一个图像。我想把所有其他图像都缩小，这样只有1个图像可以变大。@Blazemonger-增加了一点！