0

私がやろうとしているのは、ページが読み込まれるときに、画像を目的の小さなサイズにリセットすることです。

あとで画像をクリックするとアニメーションで拡大されるはずなので、ここまでで完了です。

ユーザーがその画像を再度クリックすると、ページの読み込み後に割り当てたサイズにサイズ変更する必要があります。トグル イベントを試しましたが、うまくいきません。トグルによって画像がページから消えます。そのため、if および else 条件と「small」というフラグ変数を使用してトグル イベントの代替を作成しましたが、問題はクリック イベントが 1 回しか機能しないことです。つまり、画像が小さいサイズでクリックした場合、画像は拡大されますが、もう一度クリックするとクリックイベントが発生しますが、機能しません。トグルイベントで機能させる方法があればいいのですが、そうでない場合は if とクリックイベントのelse条件。

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

    });
4

4 に答える 4

2

デモ

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;
        }
    });
});
于 2013-08-02T16:58:30.287 に答える
2

あなたのコード

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

width画像に属性を設定しますが、<img src="url" width="200">これはおそらくサイズの変更にはなりません。試す

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

または縮小をアニメーション化します

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

ウィンドウ オブジェクトのプロパティではなく、画像の属性を小さくすると、より良い結果が得られる場合もあります。

jsfiddle

于 2013-08-02T16:53:21.303 に答える
2

問題は、イベントが複数回発生しないことではなく、if ステートメントに入らないことのようです。数値の代わりにブール変数を小さくしてみてください。そうすれば、すべての==vs===乱雑さを回避できます

編集:また、else ifクリックするたびに拡大しても縮小しないようにする必要があります。

于 2013-08-02T16:53:41.430 に答える