0

画像をクリックして大きなバージョンを表示できる画像ギャラリーを作成しました。画像をクリックすると、下の行に新しい画像が挿入されます。バグが発生しましたが、解決方法がわかりません。たとえば、最初の行の画像をクリックすると、画像のプレビューが表示されます。次に、2 行下の画像をクリックしても、画像のプレビューは表示されません。Chrome や Safari では動作しません。Firefoxではうまく機能します。

私が使用するJavascriptとjQuery（2.0.3）は次のとおりです。

$(document).on("click", ".imgBox", function(){
    imgsrc = $(this).find('img').attr('src');
    var bigBox = $('<div class="bigBox"><img src="'+imgsrc+'"/></div>');
    imgClicked = $(this);
    $('.bigBox').remove()
    if ($(".bigBox").length > 0){

            bigBox.find('img').attr('src', imgsrc);
            bigBox.insertAfter(imgClicked);
    } else {
            bigBox.insertAfter(imgClicked).css('display', 'block');
    }


});

自分で試すことができるように、 JSFiddleを作成しました。少なくとも 3 行が表示されるように、ブラウザ ウィンドウのサイズを変更してください。

OSX 上の Chrome 30.0.1599.101、Safari 6.0.5、Firefox 24.0 でテストしました。

4

2 に答える 2

0

Windows の Chrome 30.0.1599.101 m でテストしたところ、非常にうまく機能しました。

于 2013-10-18T14:07:36.503 に答える