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

您的 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 2

将您的代码放入准备好的方法中：

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

在 dom 元素准备好之前实例化你的代码。

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 会自动为您执行此操作，这就是它在那里工作的原因。