如何将 JavaScript 函数应用于同一 class 下的多个不同元素（结果不同）？

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

您可以将 'relatively' 从每个 link 移动到其子图像，这样您就可以确保每次都指向相应的子图像：

(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

您似乎想根据每个 a 元素中的 img 应用此 class item，所以你可以试试：

 (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)) + '%';
    }
}());

如何将 JavaScript 函数应用于同一 class 下的多个不同元素（结果不同）？

How can I apply JavaScript function to several different elements under the same class (with different results)?

html

javascript

css

padding