1

ギャラリーに大きな画像があり、下の順序付けられていないリスト内でサムネイルの 1 つがクリックされたときに変更する必要があります。画像は動的に取得されるため、jquery スクリプトはサムネイルの src を取得し、ファイル名から「-thumb」を削除してから、大きな画像を新しいソースに置き換える必要があります。

このようなギャラリーに対する私の最善のアプローチを教えてください。

前もって感謝します。

-B

4

4 に答える 4

7

何かのようなもの：

$('img.thumb').click(function() {
    var src = $(this).attr('src');
    $('#bigImage').attr('src', src.replace(/-thumb/,''));
});

以下の例は、親指が ajax 経由で読み込まれている場合に適用されます。

(1)イベント・ライブの利用：

$('img.thumb').live("click", function() {
    var src = $(this).attr('src');
    $('#bigImage').attr('src', src.replace(/-thumb/,''));
});

(2) jQuery の ajax メソッドの 1 つへのコールバックとして (例):

function initThumbs()
{
    $('img.thumb').click(function() {
        var src = $(this).attr('src');
        $('#bigImage').attr('src', src.replace(/-thumb/,''));
    });
}

$('#thumbsDiv').load('thumbs.php?p=2', initThumbs);
于 2009-08-12T13:23:19.153 に答える
0 
$().ready(function() {

    //get all images from unordered list and apply click function
    $('ul#myList img').each(function() {
        $(this).click(function() {
            $('#mainImage').attr('src', $(this).attr('src').replace('-thumb', ''));
        });
    });

});
于 2009-08-12T15:09:01.993 に答える
0

karim79 への唯一の追加は次のとおりです。

サムネイルが同じ親バインド内に配置されている場合、その親でのイベントは、すべてのサムネイルでイベントをバインドするよりも優れた (エレガントな?) ソリューションになります。イベントは伝播されるので、イベント対象を確認することでサムネイルを見つけることができます。

于 2009-08-12T14:00:09.653 に答える
0

karim79 の答えは少し短くすることができます:

$('img.thumb').click(function() {
    $('#bigImage').attr('src', $(this).attr('src').replace(/-thumb/,''));
});

しかし、そうでなければ、良い答えです！

于 2009-08-12T13:36:15.983 に答える