jquery - jQuery 画像スワップが機能しない

Question

ねえ、私はこのjsfiddle http://jsfiddle.net/dEHZZ/1/を見つけました

$('div#thumbs img').click( function() {
$('#mainimg img').prop('src', $(this).prop('src'));
return false;  //stop link from navigating
})

ここでいくつかの質問をスクロールしますが、ここで実装しようとすると機能しませんhttp://ra-yon.com/beta/Test_sites/HFE/products/IR155R926.php

何か案は？

Answer 1

コードを ready メソッドに入れます。

$(document).ready(function(){
   $('div#thumbs img').click( function() {
   $('#mainimg img').prop('src', $(this).prop('src'));
   return false;  //stop link from navigating
   })
});

dom 要素の準備が整う前に、コードをインスタンス化します。

Answer 2

jQuery コードは、DOModel が読み取られて操作できるようになる前に実行されます。

ドキュメントready機能を使う

$(function(){  // DOM ready to be manipulated

    $('div#thumbs img').click( function( e ) {
        e.preventDefault();  //stop link from navigating
        $('#mainimg img').prop('src', this.src );
    });

});

さらに、あなたのコードではリンクが表示されないため、実際には何も必要ありませreturn falseんevent-preventDefault()(私は使用しました)

http://api.jquery.com/ready/

Answer 3

ドキュメント対応の呼び出しで jQuery をラップする

$(document).ready(function() {
    $('div#thumbs img').click( function() {
        $('#mainimg img').prop('src', $(this).prop('src'));
        return false;  //stop link from navigating
    })
});

jsFiddle はこれを自動的に行うため、そこで機能しています。