ユーザーがリンクをクリックしたときに新しい目的地に移動する必要のない動的な jQuery イメージ ギャラリーを作成しようとしています。ここで見つけることができます - http://the-session.co.uk/JSgallery/
showPic
イベントオブジェクトと要素ノードオブジェクト(のクラスでクリックされる特定の要素)の2つの引数をとる関数を作成しましたlink)
。source
変数はメソッドを使用し、要素の属性.attr()
を取得するために「ゲッター」として機能しますsrc
ノードが関数に渡されshowPic
ます。
<img id="placeholder">
次に、 という変数にを格納しましたgallery
。アイデアは、のsrc
属性を変数からに設定することでしgallery
た。src
source
次に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));
});