如何將JavaScript函數應用於同一類下的幾個不同元素（具有不同的結果）？

Question

我使用填充底部技巧來定義元素的高度以防止迴流。通常我會手動執行此操作，但由於我在圖庫中有數百個圖像，因此最好使用JavaScript。現在我相信我在那裏80％，我只需要改進功能，以便我可以得到所有不同元素的不同結果，因爲每個圖像具有不同的比例。退房的片段：

(function() { 
 

 
    var tags = document.getElementsByClassName('item'); 
 
    var img = document.getElementById('myImg'); 
 

 
    var width = img.naturalWidth; 
 
    var height = img.naturalHeight; 
 

 

 
    for (var i = 0; i < tags.length; ++i) { 
 
     tags[i].style.paddingBottom = (100 * (height/width)) + '%'; 
 
    } 
 

 
}());

.item-box { 
 

 
    display: inline-block; 
 

 
    width: 30%; 
 

 
} 
 

 
.item { 
 

 
    position: relative; 
 

 
    display: block; 
 

 
    border: 1px solid red; 
 

 
    margin: 0; 
 

 
} 
 

 
.item img { 
 

 
    position: absolute; 
 

 
    display: block; 
 

 
    top: 0; 
 

 
    left: 0; 
 

 
    width: 100%; 
 

 
    height: 100%; 
 

 
}

<div class="item-box"> <a class="item"> 
 
    <img id="myImg" alt="600x400" src="http://lorempixel.com/output/nature-q-c-600-400-1.jpg"/> 
 
    </a> 
 

 
</div> 
 
<div class="item-box"> <a class="item"> 
 
    <img id="myImg" alt="600x900" src="http://lorempixel.com/output/transport-h-c-600-900-10.jpg"/> 
 
    </a> 
 

 
</div> 
 
<div class="item-box"> <a class="item"> 
 
    <img id="myImg" alt="600x600" src="http://lorempixel.com/output/sports-q-c-600-600-10.jpg"/> 
 
    </a> 
 

 
</div>

我知道ID是唯一的一個元素，但我想不出另一種方式來解決這個問題。圖片1看起來不錯，但是它應用了Image1（橫向）到Image2（應該是縱向）和Image3（應該是正方形）的相同填充。有關如何解決此問題的任何建議？謝謝！

Answer 1

您可以從每一個環節，所以你每次都指向對應一個這樣的時間保證移動「相對」到其子圖像：

(function() { 

    var tags = document.getElementsByClassName('item'); 

    for (var i = 0; i < tags.length; ++i) { 
     var img = tags[i].children[0]; 
     console.log(img); 
     var width = img.naturalWidth; 
     var height = img.naturalHeight; 
     tags[i].style.paddingBottom = (100 * (height/width)) + '%'; 
    } 

}()); 

這裏是一個的jsfiddle：https://jsfiddle.net/3k5w0qv0/

Answer 2

的以下幾點應該能夠單獨獲取每張圖片的尺寸。我還添加了load事件偵聽器，以確保它獲得正確的高度和寬度。

(function() { 

    var tags = document.getElementsByClassName('item'); 

    for (var i = 0; i < tags.length; ++i) { 
     var img = tags[i].querySelector('img'); 
     var src = img ? img.src || false; 
     if(src){ 
      img = document.createElement('img'); 
      img.addEventListener('load', function(){ 
       tags[i].style.paddingBottom = (100 * (this.height/this.width)) + '%'; 
      }, false); 
      img.src = src; 
     } 
    } 

}()); 

Answer 3

看來你要根據每個一個帶班項目的元素中的IMG應用這個，所以你可以嘗試：

(function() { 

    var tags = document.querySelectorAll('.item'); 
    var img, width, height, tag; 

    for (var i = 0; i < tags.length; ++i) { 
     tag = tags[i]; 
     img = tag.querySelector('img'); 
     tag.style.paddingBottom = (100 * (img.naturalHeight/img.naturalWidth)) + '%'; 
    } 
}());