2

私は jQuery の完全な初心者ですが、サムネイル画像がクリックされたときに説明を表示するコードを作成しようとしています。各写真に属する敬意の説明を表示し、機能的な閉じるボタンを作成するように機能させることができました。

しかし、サムネイルを使用して説明を閉じると (トグル メソッドが使用されます)、その画像の説明を再度開くと、ボタンが増えます。

説明ウィンドウが開かれるたびにコードがボタンを追加するため、これが行われることはわかっていますが、これを防ぐ方法がわかりません。可能な解決策を探してみましたが、私の問題に似たものは思いつきませんでした..

私が使用しているjQueryコードは次のとおりです。

$(document).ready(function() {
    $('.thumbnails li img').click(function() {
        var thumbSplit = $(this).attr('id').split('_');
            identName = $('#cont_' + thumbSplit[1]);

        identName.toggle();
        $('.content-window').not(identName).hide();

        var closeButton = $('<button class="close">close</div>');
        closeButton.appendTo(identName.not(':hidden'));
        closeButton.click(function() {
            $(this).parents('.content-window').hide();
            closeButton.remove();
        });
    });
});

ここに JSFiddle リンクがあります: http://jsfiddle.net/thosetinydreams/4r8QP/4/

4

2 に答える 2

2

いずれかの画像をクリックするたびに、閉じるボタンが動的に作成されます。この問題を回避するには、いくつかの方法があります。

  • クリック イベントに参加するたびに、既存のボタンを削除してから追加してください。
  • ボタンを動的に追加しないでください。html に追加するだけです。

私は 2 番目の方に傾いています。

フィドルを修正できるかどうか見てみましょう...

HEREは、ボタンを移動するためのフィドルです。私が言及した変更を行い、$('.close').click関数を次のように移動しました。

$(document).ready(function() {
$('.thumbnails li img').click(function() {
    var thumbSplit = $(this).attr('id').split('_'),
        identName = $('#cont_' + thumbSplit[1]);

    identName.toggle();
    $('.content-window').not(identName).hide();
});
$('.close').on("click", function() {
        $(this).parents('.content-window').hide();
        closeButton.remove();
    });
});

HEREは私の最初の提案のフィドルです。これはそれほど悪くはありません。クリック関数で、既存の .close クラスがあるかどうかを確認します。存在する場合は、必要な領域に追加するだけなので、それとそのクリック イベントは 1 回だけ作成されます。

$('.thumbnails li img').click(function() {
    var thumbSplit = $(this).attr('id').split('_');
        // descrSplit = $('.descriptions').find('.content-window').attr('id').split('_'),
        identName = $('#cont_' + thumbSplit[1]);

    identName.toggle();
    $('.content-window').not(identName).hide();

    var closeButton = $('.close');
    if (closeButton.length == 0) {
        closeButton = $('<button class="close">close</div>');
        closeButton.click(function() {
            $(this).parents('.content-window').hide();
            closeButton.remove();
        });
    }
    closeButton.appendTo(identName.not(':hidden'));
});
于 2013-11-05T22:36:49.867 に答える
1

この行を変更するだけです

 closeButton.remove();

これに

$(this).remove();
于 2013-11-05T22:39:57.997 に答える