我正在做一個圖片庫查看器,帶有一些縮略圖,一箇中等大小的查看器,並且如果您單擊該查看器,它將淡入顯示全尺寸圖像的div。jQuery在執行HTML()時失敗()
下面是截圖:
我的問題是,當我點擊一個小的縮略圖,然後我點擊中型照片,即mediumpic(以淡入()的無形div),jQuery在執行html()和fadeIn()時失敗。但是,它僅在文檔準備就緒時(即默認情況下在查看器中加載的照片#1)有效。但是當我點擊任何這些小縮略圖時,它就會毀掉它。那裏發生了什麼?
我的HTML如下:
echo "<div class='largepic_div'></div>";
echo "<div class='viewer'><img class='mediumpic'src='upload/photos/".$dbphoto1."'></div>
echo "<div class='allpics'>";
echo "<div class='thumbnail_viewer'><img class='thumbnail_item'
src='upload/photos/".$dbphoto1."' height='60'></div>";
echo "<div class='thumbnail_viewer'><img class='thumbnail_item'
src='upload/photos/".$dbphoto2."' height='60'></div></div>";
我jQuery是以下幾點:
$(document).ready(function() {
$('.thumbnail_item').click(function(){
$('.viewer').html("<img class='mediumpic' src='upload/photos/"+ $(this).attr('src').split('/')\[2\] +"'>");
});
$('.mediumpic').click(function(e){
e.stopPropagation();
$('.largepic_div').html("<img src='upload/photos/"+ $(this).attr('src').split('/')\[2\] +"'>").fadeIn();
});
$('body').click(function(){
$('.largepic_div').fadeOut();
});
});
剛剛更正了php變量的$符號 – alexx0186 2012-03-25 05:32:07