在javascript中聲明值後返回零

Question

我正在試圖製作一個圖庫查看器，其中網頁顯示的是真實圖像的大拇指，然後當圖像被點擊時，顯示原始圖像（與原始大小），div將html「img」元素更改爲可見（否則默認情況下將其設置爲隱藏），同時嘗試獲取圖像的尺寸以便我可以適當地將不同尺寸的圖像居中。到他們的寬度和問題是，每當我第一次點擊任何拇指在頁面加載後，獲取圖像寬度的語句發送0，然後當點擊任何其他圖像而不重新加載頁面（包括前一個），它顯示了以前的圖像的維度，有時它的作品，有時不（大部分不），請幫助我。 JavaScript代碼如下。

// JavaScript Document 
$(document).ready(function() { 
$.post(


"loadup.php", 
     { 
      refer:"yes" 
     },function(response){ 
      $("#gallery_view_tab").html(response); 
      initAll(); 
    }); 
}); 

function initAll(){ 
    $("<div id='imgViewer'></div>").appendTo("body"); //set up image viewer 
    $("#imgViewer").insertBefore("#monster_wrap"); //set before monster_wrap 

    var thumbimgs = $(".thumbimg"); 
    for(i=0; i<thumbimgs.length; i++){ 
     var thumbimg = thumbimgs[i].id; 
     var thumbid = '#'+thumbimg; 
     $(thumbid).click(loadImgviewer); 
    } 
} 

function loadImgviewer(){ 
    var imgLink = this.getAttribute("data-link"); 
    $("<img id='closeImgviewer' src='images/close.png' /><img src='' id='imgview' />").appendTo("#imgViewer"); 
    $("#imgview").attr('src', imgLink); 
    $("#imgViewer").css('visibility', 'visible'); 
     imgwidth = $("#imgview").width(); 
     screenwidth = $(window).width(); 
     var pos = (screenwidth - imgwidth)/2; 
     $("#log").html(pos); 
     $("#imgview").css('margin-left', pos); 

$("#closeImgviewer").click(unloadImgviewer); //set click event handler on image view closer 

} 

function unloadImgviewer(){ 
    $("#imgViewer").css('visibility', 'hidden'); 
    $("#imgview").attr('src', ''); 
    $("#imgViewer").empty(); 
} 

Answer 1

我剛剛重寫了一下你的代碼。

$(document).ready(function() { 
    $.post(
     "loadup.php", 
     { 
      refer:"yes" 
     }, 
     function(response){ 
      $("#gallery_view_tab").html(response); 
      initAll(); 
     } 
    ); 
}); 

function initAll(){ 
    $("<div id='imgViewer'></div>").appendTo("body"); //set up image viewer 
    $("#imgViewer").insertBefore("#monster_wrap"); //set before monster_wrap 
    $(".thumbimg").on('click', loadImgviewer); 
} 

function loadImgviewer(){ 
    var imgwidth, pos, 
     screenwidth = $(window).width(); 
    var imgLink = this.getAttribute("data-link"); 
    $("<img id='closeImgviewer' src='images/close.png' /><img src='' id='imgview' />").appendTo("#imgViewer"); 
    $("#imgview").attr('src', imgLink).on('load',function(evt){ 
     imgwidth = $(this).width(); 
     pos = (screenwidth - imgwidth)/2; 
     $("#log").html(pos); 
     $("#imgview").css('margin-left', pos); 
     $("#imgViewer").css('visibility', 'visible'); 
    }; 
    $("#closeImgviewer").click(unloadImgviewer); //set click event handler on image view closer 
} 

function unloadImgviewer(){ 
    $("#imgViewer").css('visibility', 'hidden'); 
    $("#imgview").attr('src', ''); 
    $("#imgViewer").empty(); 
} 

請試試看。沒有嘗試，但我認爲它應該工作。