jQuery數據（）方法不總是工作？

Question

我在創建可靠的jquery代碼時將圖像調整爲其父div的寬度時遇到了非常不好的問題。有時候它有時候不工作。起初我認爲IE瀏覽器只是在竊聽我，但有時候Safari瀏覽器，Firefox或Chrome瀏覽器並沒有啓動我的方法。

$(".post-body img").each(function() { 
     $(this).data('width', $(this).width()); 
     $(this).data('height', $(this).height()); 
    }); 

我保存寬度和高度寬度的數據方法在我的window.load - 函數。

之後，我打電話給setimgwidth（）函數。

function setimgwidth() { 
    var bw = $('.post-body').width(); 
    $(".post-body img").each(function() { 
      if (bw < $(this).data('width')) { 
       $(this).attr('width', Math.round(bw)); 
       //calculate ratio height 
       var newHeight = (bw/$(this).data('width')) * $(this).data('height'); 
       $(this).attr('height', Math.round(newHeight)); 
      } 
    }); 
} 

所以我檢查父div是否比它裏面的圖像小，圖像應該調整到父div的寬度。

我只是找不到，爲什麼這種方法不總是工作。有時圖像會調整大小，有時不會。

你有什麼奇怪的嗎？什麼你會做得更好？ 其他一些方法？

謝謝

編輯：而在另一

jQuery(function($){//document ready 

    $(window).load(function(){ 

     //Save the original image width 
     $(".post-body p img, .post-body .wp-caption img").each(function() { 
      $(this).data('width', $(this).width()); 
      $(this).data('height', $(this).height()); 
     }); 

     //window resize event 
     $(window).resize(function() { 
      setimgwidth(); 
     }); 

     //set image width inside of .post-body 
     function setimgwidth() { 
      $(".post-body p img, .post-body .wp-caption img").each(function() { 
       console.debug($(this).data('width')); 
       console.debug($(this).data('height')); 
      }); 
     } 

     //call image-resize functions onload 
     setimgwidth(); 

    }); 

});//document ready 

控制檯總是告訴我，圖像的寬度和高度爲0

Answer 1

在您使用$(this).attr('width');一個地方，你正在使用$(this).width()。嘗試.width()和.height()，我相信你應該使用的，在這兩個地方：

$(".post-body img").each(function() { 
    $(this).data('width', $(this).width()); 
    $(this).data('height', $(this).height()); 
}); 

$(".post-body img").each(function() { 
     if (bw < $(this).data('width')) { 
      $(this).width(Math.round(bw)); 
      //calculate ratio height 
      var newHeight = (bw/$(this).data('width')) * $(this).data('height'); 
      $(this).height(Math.round(newHeight));    
     } 
}); 

而且（也許是不相關）你不應該被設定數據寬度，後爲每個圖像高度屬性改變他們的維度？

$(".post-body img").each(function() { 
     if (bw < $(this).data('width')) { 
      $(this).width(Math.round(bw)); 
      //calculate ratio height 
      var newHeight = (bw/$(this).data('width')) * $(this).data('height'); 
      $(this).height(Math.round(newHeight)); 
      $(this).data("width", Math.round(bw)); 
      $(this).data("height", newHeight); 
     } 
}); 

最後，我希望你的onload存儲圖像尺寸@Emmett在他的評論中建議：

$(".post-body img").load(function() { 
    $(this).data('width', $(this).width()); 
    $(this).data('height', $(this).height()); 
}); 

記住width()和height()返回的實際內容的寬度和高度，不管CSS的屬性，所以只有在內容/圖像或任何已完全加載的情況下才能捕獲這些值。

Answer 2

代碼審查（這不是一個答案）

我重新分解代碼。我相信現在它更具可讀性。

function setImgWidth() { 
    var b = $(".post-body"); 
    var bw = b.width(); 

    b.find("img").each(function() { 
      var t = $(this); 
      var tw = t.data("width"); 
      var th = t.data("height"); 

      if (bw < tw) { 
       t 
        .width(Math.round(bw)) 
        .height(Math.round((bw/tw) * th)); 
      } 
    }); 
}