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

【问题标题】：How can I apply JavaScript function to several different elements under the same class (with different results)?如何将 JavaScript 函数应用于同一类下的多个不同元素（结果不同）？
【发布时间】：2023-03-11 23:36:02
【问题描述】：

我正在使用 padding-bottom 技巧来定义元素的高度以防止回流。通常我会手动执行此操作，但由于我的画廊中有数百张图像，因此最好使用 JavaScript。现在我相信我已经完成了 80%，我只需要改进函数，这样我就可以获得所有不同元素的不同结果，因为每个图像都有不同的比例。查看sn-p：

(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（应该是方形）应用了相同的填充。关于如何解决这个问题的任何建议？谢谢！

【问题讨论】：

如果您将所有具有类 item 的元素作为一个集合，您可以使用 tags[i].getElementsByTagName('img')[0] 或更简单的方法获取每个包含的 img 元素： tags[i].querySelector('img').

标签： javascript html css padding

【解决方案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/

【讨论】：

【解决方案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;
        }
    }

}());

【讨论】：

【解决方案3】：

您似乎想根据每个 a 元素中的 img 应用它，并带有 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)) + '%';
    }
}());

【讨论】：