0

重複の可能性:
JQuery 隠しオブジェクト

初めて問題を投稿しますが、多くの人が理解していませんでした。わかりました、混乱の部分を削除して、もう一度質問を変更します。

IDが異なる4つの画像があります。各画像は別のものに関連しているため、ここではクラスを使用できません。混乱を避けるために、ここではクラスを忘れてください。ユーザーが各画像をクリックすると、非表示になります。したがって、4 つの画像をクリックすると、もちろん 4 つは非表示になります。

4枚の画像を非表示にした後、警告ボックスが表示されるようにしたいです。すべての画像がここに隠されているかどうかを確認するコードを含める必要があります。混乱を避けるため、理由を聞かないでください。クリックすると画像が非表示になりますが、唯一の問題は、4 つの画像が非表示になった後に警告ボックスが表示されないことです。以下のコード:

$(document).ready(function() {

    $('#image1').click(function() {
        $(this).hide('slow');
    });

    $('#image2').click(function() {
        $(this).hide('slow');
    });

    $('#image3').click(function() {
        $(this).hide('slow');
    });

    $('#image4').click(function() {
        $(this).hide('slow');
    });

    if ($('#image1, #image2, #image3, #image4').is(':hidden')) {
        alert('kkk');
    }
});​
4

6 に答える 6

1

hide メソッドのコールバックを使用し、if ステートメントをクリック イベント内に移動して、クリックごとに発生するようにします。

$(document).ready(function(){
    var images = $("#image1, #image2, #image3, #image4")
    images.click(function(){
        $(this).hide('slow',function(){
            if (images.filter(":visible").length === 0) {
                alert("worky");
            }
        });
    });
});
于 2012-10-30T21:28:07.330 に答える
1

まず、 で始まるすべての要素に対してセレクターを使用することで、繰り返しをなくすことができますimage。

$("[id^=image]")id が で始まるすべての要素を選択しますimage。

次に、アニメーションの終了時にのみ実行されるように、非表示のコールバック関数を提供する必要があります。

$(document).ready(function() {
    $("[id^=image]").click(function() {
        $(this).hide('slow', function() {
            if ($('[id^=image]:visible').length == 0) {
                alert('I am a bunny');
            }
        });
    });
});​
于 2012-10-30T21:27:57.040 に答える
1

JSFiddle

それぞれの に対して起動される のコールバックとしてfunctionチェックを行うには、を作成する必要があります。あなたがそれを持っている方法は、バインドされた後、ステートメントを1回実行することです。以下の方法でそれを修正します...click eventimageclick eventsif

$(document).ready (function() {

   $('#image1').click(function() {
      $(this).hide('slow', checkImages);
   });

   $('#image1').click(function() {
      $(this).hide('slow', checkImages);
   });

   $('#image2').click(function() {
       $(this).hide('slow', checkImages);
   });

   $('#image3').click(function() {
       $(this).hide('slow', checkImages);
   });


});

function checkImages(){
   if ($('[id^=image]:visible').length == 0) {
     alert('I am a bunny');
   }

}
于 2012-10-30T21:20:43.713 に答える
1

これを試してみてください-すべての関数を1つに結合してください..それらはすべて同じことをするからです

$('#image1,#image2,#image3,#image4').click(function() {
    // hide current clicked
    $(this).hide('slow',function(){
        // check if all the images are hidden
        if ($('#image1,#image2,#image3,#image4').filter(':hidden').length == 4) {
            alert('I am a bunny');
        }
    });
});​
于 2012-10-30T21:24:43.330 に答える
0

これは、単純化して、あなたが望むことを行います：

        $('#image1, #image2, #image3, #image4').click(function () {
            $(this).hide('slow', alertIfHidden);
        });

        function alertIfHidden() {
            if (!($('#image1, #image2, #image3, #image4').is(':visible'))) {
                alert('I am a bunny');
            }
        }

少なくとも 1 つの画像が非表示の場合に true を返した元のコードに対して、画像が表示されていないことを確認する必要があることに注意してください。

于 2012-10-30T21:27:42.473 に答える
-1

画像が非表示になるたびに、すべてが非表示になっているかどうかを確認しませんでした。ここには多くのコードリファクタリングが可能です

$(document).ready (function() {

$('#image1').click(function() {
$(this).hide('slow');
checkAllHidden();
});

$('#image1').click(function() {
$(this).hide('slow');
checkAllHidden();
});

$('#image2').click(function() {
$(this).hide('slow');
checkAllHidden();
});

$('#image3').click(function() {
$(this).hide('slow');
checkAllHidden();
});


});
function checkAllHidden(){
  if ($('#image1, #image2, #image3, #image4').is(':hidden')) {
    alert('I am a bunny');
  }
}
于 2012-10-30T21:20:40.273 に答える