3

おはよう諸君。私が作成している単純な jQuery ギャラリーに問題があります。これにより、ユーザーはいくつかのボタンを使用して画像のコレクションを循環し、同時にこれらの画像をタイマーで回転させることができます。私の問題は、ユーザーがボタンを複数回クリックしてフェードインアニメーションをキューに入れ、何度も繰り返すことができることです。たとえば、ユーザーがボタンを 5 回クリックする > 同じ画像が 5 回フェードイン/フェードアウトする > ギャラリーが次の画像に移動します。

私は使用してみました：

$('#homeGalleryImage li a').unbind('click');

クリック イベントが発生してから再バインドした後:

$('#homeGalleryImage li a').bind('click');

完了した後、ボタンを1回押した後にクリックイベントを削除するだけで、再バインドすることはありませんか?

また、次の方法でボタンを無効にしようとしました：

$('#homeGalleryImage li a').attr('disabled', true);

無駄に... ？

画像のトランジション中にボタンをクリックすると、不透明度が下がったかのように次の画像が「ぼやけて」表示されるという二次的な問題がありますか? 非常に奇妙です...ボタンクリックのコードは次のとおりです。

var i = 1;
var timerVal = 3000;
$(function () {
    $("#homeGalleryControls li a").click(function () {
        var image = $(this).data('image');
        $('#galleryImage').fadeOut(0, function () {
            $('#galleryImage').attr("src", image);
        });
        $('#galleryImage').fadeIn('slow');
        $('.galleryButton').attr("src", "/Content/Images/Design/btn_default.gif");
        $(this).find('img').attr("src", "/Content/Images/Design/btn_checked.gif");
        i = $(this).data('index') + 1;
        if (i == 4) {
            i = 0;
        }
        timerVal = 0;
    });
});

タイマーで画像を循環するコードは次のとおりです。

//Cycle through gallery images on a timer
window.setInterval(swapImage, timerVal);
function swapImage() {
    $('#galleryImage').fadeOut(0, function () {
        var imgArray = ["/Content/Images/Design/gallery placeholder.jpg", "/Content/Images/Design/1.jpg", "/Content/Images/Design/2.jpg", "/Content/Images/Design/3.jpg"];
        var image = imgArray[i];
        i++;

        if (i == 4) {
            i = 0;
        }

        $('#galleryImage').attr("src", image);
        $('#galleryImage').fadeIn('slow');
    });
    var currentButton = $('#homeGalleryControls li a img').get(i - 1);
    $('.galleryButton').attr("src", "/Content/Images/Design/btn_default.gif");
    $(currentButton).attr("src", "/Content/Images/Design/btn_checked.gif");
}

プラグインを使用する方が良いアイデアかもしれませんが、私は jQuery に非常に慣れていないため、既製のコードを使用するのではなく、何かを学びたいと考えています。

どんな助けでも大歓迎です。

ありがとうございました

4

2 に答える 2

6

クリックイベントをキャンセルするために、いつでも要素に何かを追加してみることができますか?

例えば

$(".element").click(function(e) {

    if ( $(this).hasClass("unclickable") ) {
        e.preventDefault();
    } else {

        $(this).addClass("unclickable");
        //Your code continues here
        //Remember to remove the unclickable class when you want it to run again.

    }

}):

あなたの場合、クリック時にチェックを追加してみてください。

$('#homeGalleryImage li a').attr('data-disabled', "disabled");

次に、クリックイベント内

if ( $(this).attr("data-disabled" == "disabled") {
  e.preventDefault();
} else {
  //Ready to go here
}

編集

これは、要素がクリックできなくなることを示す実際の例です。http://jsfiddle.net/FmyFS/2/

于 2012-07-19T08:14:47.197 に答える