0

私が作成している画像ギャラリーでは、jquery クローンを使用して、クリックされた画像のサムネイルを複製し、それを #big div に追加します。これは、センタリングと固定配置に役立ちます。私が抱えている問題は、#right_arrow または #left_arrow をクリックしたときに、リスト内の次または前の項目を選択して本文に追加する方法がわからないことです。

jquery に .next() があることは知っていますが、それがどのように機能するかわかりません。

ここに jsFiddle があります: http://jsfiddle.net/reveries/UgQre/

            $(document).ready
            $('img, div.wrapper').each( function() {
                var $img = $(this);
                $img.addClass('thumbnail');
                $img.wrap('<li></li>');

                $img.click(function() {
                    $img.clone().appendTo('#big');
                    $('#big').fadeToggle('slow');
                    $('#right_arrow').fadeIn('slow');
                    $('#left_arrow').fadeIn('slow');
                });

            $('#big').click(function(){
                $img.addClass('thumbnail');
                $('#big').fadeOut('slow');
                $(this).html('');
                $('#right_arrow').fadeOut('slow');
                $('#left_arrow').fadeOut('slow');
            })
            $('#right_arrow').click(function(){
                $('#big').html('');
            })
            $('#left_arrow').click(function(){
                $('#big').html('');
            })

        });
4

1 に答える 1

1

フィドルの修正版は次のとおりです。http://jsfiddle.net/abeisgreat/fu3fX/

あなたのコードには、正しく動作しないいくつかの問題があります。まず、.click() 呼び出しは .each 内にあります。つまり、#big、#right_arrow、#left_arrow はすべて、同じ関数の複数のバインディングを持つことになります。これは、望んでいるものではありません。

第二に、.next() と .prev() が使用したいものであると仮定するのは正しいです。問題は、各 img を li タグでラップしているため、 $img.next() が存在しないことです。あなたの .each() で。このため、$img には兄弟がなく、.next() と .prev() は次の img タグを返しません。したがって、次の画像を取得するには、$img.parent().next().children() を呼び出す必要があります。

私が行った唯一の大きな変更は、選択した画像の li を含む $selected_li というグローバルを追加したことです。それができたら、これを行うことができます。

$('#left_arrow').click(function(){
    $('#big').html('');
    $selected_li.prev('li').children('img').clone().appendTo('#big');
    $selected_li = $selected_li.prev('li')
})

後方に進むには、または .next() とまったく同じように前方に進みます。私が言ったように、あなたは非常に近かったです。大きな問題は、あなたの img タグから兄弟を削除する li でラッピングしたことだと思います!

これが役に立てば幸いです、安倍

于 2013-04-04T19:48:28.927 に答える