Question

我要做的是，当页面加载时，我正在将图像重置为我想要的小尺寸。

如果用户稍后点击图片，它应该放大动画，我已经完成了这一部分。

当用户再次点击该图片时，应将其大小调整为我在加载页面后指定的大小，我尝试切换事件，但这不起作用，切换只会使我的图像从页面中消失。所以我通过使用if和else条件和一个名为“small”的标志变量创建了一个切换事件的替代，但问题是click事件只工作一次，即：如果图像是小尺寸我单击它，图像被放大但当我再次点击它时，点击事件被触发但它不起作用，我希望如果有任何方法可以使它与切换事件一起工作，否则我想通过使用if和点击事件中的其他条件。

这是HTML：

<html>
<head>
    <title></title>
    <script src="jquery-1.10.1.min.js"></script>
    <script src="index.js"></script>
</head>
<body>
      <img src="wordpress.jpg" class="small-Img" id="test"> <br>
          <img src="store.jpg" class="small-Img">

</body>
</html>

这是脚本：

$(document).ready(function() {

         var small;
   $('.small-Img').on('load',function(){


        $(".small-Img").attr('width','200');
          small=Number(1);
    });

    $('.small-Img').on('click',function ()  {
        alert("event fired");
        if(small==1){
        var obj=$(this);
        var originalWidth=obj[0].naturalWidth;
        var originalHeight=obj[0].naturalHeight;
        $(this).animate({ height: originalHeight,  width: originalWidth   }, 1000, function() { });
            small=Number(0);

        }
        if(small==0){
            $(".small-Img").attr('width','200');
            small=Number(1);
        }
    });

    });

Answer 1

您的代码

$(".small-Img").attr('width','200');

在图片上设置width属性，类似于<img src="url" width="200">，可能不会导致尺寸更改。试试

$('.small-Img').css('width','200px');

或缩小动画

 $('.small-Img').animate({  width: '200px'   }, 1000);

您也可以获得更好的结果，使您的图像属性变小而不是窗口对象的属性

jsfiddle

Answer 2

听起来问题不在于事件没有被多次触发，而是它没有输入你的if语句。尝试使用小布尔变量而不是数字，这样就可以避免所有== vs ===混乱

编辑：此外，您可能需要else if，以便在每次点击时放大后不会收缩。

Answer 3

DEMO

设置或获取css值我们使用.css()而不是.attr()

==仅检查value

===检查value和datatype

$(document).ready(function () {
    var small;
    $('.small-Img').on('load', function () {
        $(".small-Img").css('width', '200'); //changed attr to css
        small = 1;
    });
    $('.small-Img').on('click', function () {
        if (small === 1) { //changed == to ===
            var obj = $(this);
            var originalWidth = obj[0].naturalWidth;
            var originalHeight = obj[0].naturalHeight;
            $(this).animate({
                height: originalHeight,
                width: originalWidth
            }, 1000, function () {});
            small = 0;
        }
        if (small === 0) {  //changed == to ===
            $(".small-Img").css('width', '200'); //changed attr to css
            small = 1;
        }
    });
});

Answer 4

首先在图像本身上制作“小”数据属性怎么样？没什么大不了的，但更方便（恕我直言）。接下来的事情是，当你想检查第二次点击时，你可能会考虑做一个其他的，而不仅仅是一个if。不确定它是否有所作为，但它是一个明显的逻辑区分，你可以拥有一个或另一个 - 而不是两者。第三，如果您将宽度向下设置为动画，则还可以设置高度的动画，该高度由您的小高度除以原始高度乘以原始宽度计算得出。似乎工作，请在此处查看：http://jsfiddle.net/snowMonkey/7nCMF/1/

    $('.small-Img').css('width','200px').data("small", 1);

    $('.small-Img').on('click',function ()  {
      var that=this;
      this.smallWidth = "200px";
      this.smallHeight = (200/$(this)[0].naturalWidth) * $(this)[0].naturalHeight+"px";
      if($(this).data("small")===1 ){

        var obj=$(that);
        var originalWidth=obj[0].naturalWidth;
        var originalHeight=obj[0].naturalHeight;
        $(that).animate({
            height: originalHeight, 
            width: originalWidth  
        }, 1000, function() { });
        $(that).data("small",0);
      } else if($(this).data("small")===0){
          $(that).animate({
              width: that.smallWidth,
              height: that.smallHeight
          }, 1000, function(){}).data("small", 1);
      }
    });

祝你好运！

jQuery Click事件只工作一次（之前的stackoverflow答案都没有帮助）

4 个答案: