0

ユーザーがリンクをクリックしたときに新しい目的地に移動する必要のない動的な jQuery イメージ ギャラリーを作成しようとしています。ここで見つけることができます - http://the-session.co.uk/JSgallery/

showPicイベントオブジェクトと要素ノードオブジェクト（のクラスでクリックされる特定の要素）の2つの引数をとる関数を作成しましたlink)。source変数はメソッドを使用し、要素の属性.attr()を取得するために「ゲッター」として機能しますsrcノードが関数に渡されshowPicます。

<img id="placeholder">次に、 という変数にを格納しましたgallery。アイデアは、のsrc属性を変数からに設定することでしgalleryた。srcsource

次にevent.preventDefault();、イベントのデフォルト アクションがトリガーされないように使用しました。ただし、 elementsユーザーはまだ望ましくない新しい目的地に移動しています。

最後のステップは、.link(<a>要素) を選択して.onメソッドを使用し、ユーザーがクリックしたときに無名関数が呼び出されるようにすることでした。次にshowPic関数が呼び出され、 を使用してクリックされた特定の要素が渡されます$(this)。

現在、コードが機能しておらず、その理由がわかりません。助言がありますか？

function showPic (event, el) {
    var source = el.attr('source'); // getter
    var gallery = $('#placeholder'); // <img id="placeholder">
    gallery.attr('src', source); // setter
    event.preventDefault();
}

$('.link').on('click', function() {  
        showPic($(this));
});
4

3 に答える 3

1

そのような関数内では、イベントも渡す必要があります。

function showPic (event, el) {
    event.preventDefault();
    $('#placeholder').attr('src', el.attr('source'));
}

$('.link').on('click', function(event) {  
    showPic(event, $(this));
});

一方、関数を直接参照すると、イベントが渡され、バインドされた要素と同じ場合、event.target を使用してクリックされた要素を取得できます。

function showPic (event) {
    event.preventDefault();
    $('#placeholder').attr('src', $(event.target).attr('source'));
}

$('.link').on('click', showPic);
于 2013-01-28T10:16:54.790 に答える
0

あなたは最初のパラメータを逃しました、、

$('.link').on('click', function(e) {  
    showPic(e,$(this));
});
于 2013-01-28T10:16:20.000 に答える
0

showPic 関数は event と el の 2 つの引数を取ります

ただし、要素を showPic に渡すだけであり、showPic では、この要素はイベント引数に格納されます。

コードを次のように更新します。

$('.link').on('click', function(event) {  
        showPic(event, $(this));
});
于 2013-01-28T10:17:40.857 に答える