点击时切换尺寸 img答案

【问题标题】：Toggle size img on click点击时切换尺寸 img
【发布时间】：2021-04-19 11:02:16
【问题描述】：

我有一个 图片列表，高度为 250 像素，带有类产品。

如果我点击图片，它必须变成 500 像素。
如果我再次单击图像，它必须变回 250 像素。
如果我再次点击它必须变成 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>

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

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

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

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

【问题讨论】：

您可以尝试将 dblclick 侦听器置于点击动画的就绪状态。所以它只能在点击动画完成后触发

标签： jquery

【解决方案1】：

首先，在你的 CSS 中设置 cursor: pointer 样式！

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

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

FIDDLE

编辑：

对于多个图像，使用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);
      });
});

FIDDLE

【讨论】：

呸，全局变量。这种方法只有在页面上只有一个这样的图像时才有效。切换$(this).data('flag') 以获得更好的遏制。 jsfiddle.net/mblase75/aNf2F/5
@Blazemonger - 它并不是真正的全局，它在 DOM 就绪函数的范围内；）。我确实同意使用 data()，但是向新手解释这种方法要容易得多。
但他确实指定了他有一个“图像列表”，而不是单个图像。
我想让所有其他的都变小，所以只有 1 可以变大。
@Blazemonger - 添加了更多！

【解决方案2】：

将变量赋值为 1 表示点击，0 表示取消点击，然后使用 .click 函数如下：

$(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);
 };
 });
});

【讨论】：