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 call

中

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

jsFiddle会自动为您执行此操作，这就是它在那里工作的原因。

jQuery图像交换无法正常工作

3 个答案: