用jquery做相册中的问题

Question

body{ text-align:center;}
*{ margin:0; padding:0;}
img{ border:none;}
#container{ width:900px; height:900px; background:#000000; border:1px solid #006633; margin:auto; padding:0;}
#loader{ width:480px; margin:auto; height:500px; background:#FFFFFF; float:left; margin-right:5px;}
#imageOptions{ float:left;}
#imageOptions li{ list-style:none; margin:10px;}
.loading{ background:url(images/spinner.gif) center center no-repeat;}
h3{ line-height:500px;}<div id="container">
<div id="loader">
     <h3>Click on an images to view it full size</h3>
    </div>
    <ul id="imageOptions">
     <li><a href="images/img1.jpg"><img src="images/img1.jpg" /></a></li>
        <li><a href="#"><img src="images/img2.jpg" /></a></li>
        <li><a href="#"><img src="images/img1.jpg" /></a></li>
        <li><a href="#"><img src="images/img2.jpg" /></a></li>
    </ul>
</div>
$(document).ready(function(){
$("#imageOptions").click(function(){
var imageSource=$(this).children("img").attr("src");
$("#loader").addClass("loading");
$("h3").remove();
showImage(imageSource);
return false;
});    
});
function showImage(src){
$("#loader img").fadeOut('slow').remove();
var largeImage=new Image();
$(largeImage).attr("src",src).load(function(){
$(largeImage).hide();
$("loader").removeClass("loading").append(largeImage);
$(largeImage).fadeIn('slow');
});
}
我是照着书上做的，点击右边li中的小图，左边显示大图，可是没反应，IE9调试说$(largeImage)为空；问下怎么解决这个问题呢，再看看代码中有没有其他错误

Answer 1

  $(largeImage).attr("src",src).load(function(){
        var largeImage = this;
        $(largeImage).hide();
        $("loader").removeClass("loading").append(largeImage);
        $(largeImage).fadeIn('slow');
    });
这样试试

Answer 2

(function($){
$(window).bind(function(){
$('#imageOptions img').click(function(){
 $("#loader").addClass("loading").find('h3').remove().end().load($(this).attr('src'),function(){$("#loader").removeClass("loading")});
});
});
})(jQuery);

Answer 3

各位是不是这里attr("src",src)有问题，后面那个src没有指明

Answer 4

你这个地方的src应该是空值吧，你alter一下看！原因：children([expr])
取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()之考虑子元素而不考虑所有后代元素。不知道对不对啊，望有用！

Answer 5

我想attr("src",src)后面这个src是作为参数传递的

Answer 6

$(document).ready(function(){
    $("#imageOptions").click(function(){
        
var imageSource=$(this).children("img").attr("src");
        $("#loader").addClass("loading");
        $("h3").remove();
        showImage(imageSource);
        return false;
    });                           
});你这里选择器写的有问题吧!`  你这样写的话  点击ul就会触发事件  但是                            var imageSource=$(this).children("img").attr("src");
这里查询出来的就该出错了吧!~  系统还没那么只能吧!~

Answer 7

<style type="text/css">
body{ text-align:center;}
*{ margin:0; padding:0;}
img{ border:none;}
#container{ width:900px; height:900px;  border:1px solid #006633; margin:auto; padding:0;}
#loader{ width:480px; margin:auto; height:500px; float:left; margin-right:5px;}
#imageOptions{ float:left;}
#imageOptions li{ list-style:none; margin:10px;}
.loading{ background:url(images/spinner.gif) center center no-repeat;}
h3{ line-height:500px;}
</style>
<div id="container">
<div id="loader">
     <h3>Click on an images to view it full size</h3>
    </div>
    <ul id="imageOptions">
     <li><a href="#"><img src="images/img1.jpg" /></a></li>
        <li><a href="#"><img src="images/img2.jpg" /></a></li>
        <li><a href="#"><img src="images/img1.jpg" /></a></li>
        <li><a href="#"><img src="images/img2.jpg" /></a></li>
    </ul>
</div>
$(document).ready(function(){
$("#imageOptions a").click(function(){
var imageSource=$(this).children("img").attr("src");
$("#loader").addClass("loading");
$("h3").remove();
showImage(imageSource);
return false;
});    
});
function showImage(src){
$("#loader img").fadeOut('slow').remove();
var largeImage=new Image();
$(largeImage).attr("src",src).load(function(){
$(largeImage).hide();
$("#loader").removeClass("loading").append(largeImage);
$(largeImage).fadeIn('slow');
});
}
重新贴一遍代码，，不好意思，个人发现很多错误，现在的问题是点击img后，左边只有加载图标显示，，没有出现大的图像

Answer 8

$(document).ready(function(){
    $("#imageOptions a").click(function(){
        var imageSource=$(this).children("img").attr("src");
        $("#loader").addClass("loading");
        $("h3").remove();
        adTimer = setInterval(function () {
                $("#loader").html("<img src='"+imageSource+"'>");
                clearInterval(adTimer);
            }, 2000);
        });                           
});

Answer 9

$(document).ready(function(){
    $("#imageOptions a").click(function(){
        var imageSource=$(this).children("img").attr("src");
        $("#loader").addClass("loading");
        $("h3").remove();
        adTimer = setInterval(function () {
                $("#loader").html("<img src='"+imageSource+"'>");
                $("#loader").removeClass("loading");
                clearInterval(adTimer);
            }, 2000);
        });                           
});

Answer 10

其实感觉没必要要把img标签嵌套到a标签里   具体代码没有运行不知道你这样嵌套的时候发没发生跳转

Answer 11

没有跳转，，代码中写了return false

Answer 12

谢谢，你给我的代码测试成功了，有一点是loading没有去除，但是已经很好了，谢谢

Answer 13

$("#loader")addClass("").removeClass("loading");
这样试一下呢!~   还是有些不太懂jquery的机制  可能移除class的时候必须就要添加一个新的吧  否则不能成功

Answer 14

$("#loader").addClass("").removeClass("loading");
  刚才少了个点  直接敲的没注意