Question

我有這樣的代碼：

while ($row = mysql_fetch_assoc($result1)) { 
echo " 
<a href='#'id='VV".$row['id']."'> 
<p>".$row['title']."</p> 
<p>".$row['date']."</p> 
<img onload='scale()' id='II".$row['id']."' src='../res/videos/img/".$row['img']."'/> 
</a> 
<script type='text/javascript'> 
function scale(){ 
    var image = document.getElementById('II".$row['id']."'); 
    var width = image.width; 
    var height = image.height; 
    if (width > 150) { 
    image.style.width = '150px'; 
    image.style.height = 'auto'; 
    } 
    width = image.width; 
    height = image.height; 
    if (height > 80) { 
    image.style.height = '80px'; 
    image.style.width = 'auto'; 
    } 
    width = image.width; 
    height = image.height; 
} 
VV".$row['id'].".onclick = function() { 
var Result = '".$row['id']."'; 
location.href='loged.php?Result=' + Result; 
    } 
</script> 
"; 
}?> 

我想調整大小功能加載的每個圖像上調用，但最後的圖像加載時，它被調用，只有最後一個圖像生效。我應該改變什麼？

Answer 1

我認爲你正試圖在150x80的區域適合圖像。如果是這樣的話，我建議你使用CSS background-size: contain來爲你做縮放。

while ($row = mysql_fetch_assoc($result1)) 
    echo "<a href='#' id='VV" . $row['id'] . "'>" . 
      "<p>" . $row['title'] . "</p>" . 
      "<p>" . $row['date'] . "</p>" . 
      "<div id='II" . $row[id] . "' " . 
       "style='width: 150px; " . 
         "height: 80px; " . 
         "background: url(../res/videos/img/" . $row['img'] . "); " . 
         "background-size: contain; " . 
         "background-repeat: no-repeat;'>" . 
      "</div>" . 
     "</a>"; 

將樣式抽象爲CSS文件是個好主意。

while ($row = mysql_fetch_assoc($result1)) 
    echo "<a href='#' id='VV" . $row['id'] . "'>" . 
      "<p>" . $row['title'] . "</p>" . 
      "<p>" . $row['date'] . "</p>" . 
      "<div id='II" . $row[id] . "' " . 
       "class='my_img_box' " . 
       "style='background: url(../res/videos/img/" . $row['img'] . ");'>" . 
      "</div>" . 
     "</a>"; 

的CSS

div.my_img_box { 
    width: 150px; 
    height: 80px; 
    background-size: contain; 
    background-repeat: no-repeat; 
} 

Answer 2

您正在爲每個$行放置腳本。我會有一個javascript函數的副本，然後你可以調用這個函數N次，將id傳遞給函數。這樣，它將適用於所有行，而不僅僅是最後一行（因爲JS函數的最後一個副本將是您發現的唯一一個調用的）。

簡短的回答：通過使用一個id參數讓你的功能更好，並且只將該功能放在頁面上一次。允許您使用每個ID調用該函數。