1

我有一个高度为 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 语句，或者是否可以切换高度？

4

2 回答 2

2

首先，cursor: pointer在你的 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);
      });
});

小提琴

于 2013-04-04T13:28:49.137 回答
0

为 click 分配一个变量，为 unclick 分配一个 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);
 };
 });
});
于 2013-04-04T13:28:50.173 回答