0

プログラムしたコードに問題があります。アイデアは、jQuery を使用してカスタムの「ライトボックス」を作成することです。サムネイルをクリックすると、コードは属性「data-first-img-url」、「data-second-img-url」、および「data-third-img-url」を持つ div を調べます-これらの属性には含まれていますポップアップ ギャラリーの背景画像となる URL。

しかし、私が抱えている問題は、ポップアップを閉じてクリックして再度開くと、画像が2回表示されることです。

これが私のjQueryです：

$('.gallery').click(function() {
$('#overlay').fadeIn().append('<div class="main_image"></div><div class="second_image"></div><div class="third_image"></div>');
$main_img_url = $(this).attr('data-first-img-url');
$second_img_url = $(this).attr('data-second-img-url');
$third_img_url = $(this).attr('data-third-img-url');

$('.main_image').css("background-image", "url('" + $main_img_url + "')");
$('.second_image').css("background-image", "url('" + $second_img_url + "')");
$('.third_image').css("background-image", "url('" + $third_img_url + "')");

});

$(".close_gallery").click(function() {
$('#overlay').fadeOut();

});

そしてJSfiddle（簡略化）はこちら：http://jsfiddle.net/9d9sz/3/

画像をクリックすると正常に動作しますが、ポップアップを閉じて再度開くと、2 回表示されます。

4

3 に答える 3

1

これを試してみてください。新しい画像を開くたびに新しい画像を追加しています。新しい画像を追加する前にそれらを削除してください

$('.gallery').click(function() {
    $('.main_image').remove();

デモ

于 2013-09-26T08:27:43.993 に答える
0

フェードインしますが、ページにhtmlを追加するたびに。

ページに div を作成し、style="display:none;" にします。次に、クリック関数で必要なのは、div を参照してフェードインすることだけです。

于 2013-09-26T08:30:16.733 に答える
0

これは、閉じたときに削除せずに div を 2 回追加しているためです。

試す：

$('#overlay').find('.main_image').remove().end().fadeIn().append('<div class="main_image"></div><div class="second_image"></div><div class="third_image"></div>');

しかし、DOM 要素を常に追加したり削除したりするよりも、常に DOM 要素を保持し、必要に応じて表示/非表示にする方がよいでしょう。

于 2013-09-26T08:30:34.737 に答える