Question

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

如果我点击图片，它必须变成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>

这使得单击时图像更大，双击时图像更小。

但我希望在图像为500px时进行双击动作。

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

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

Answer 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

Answer 2

为单击分配变量1，为unlick分配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);
 };
 });
});

单击时切换大小图像

2 个答案: