检测并动态添加所有图像的宽度和高度以及 alt 属性

Question

我正在尝试为网页上没有这些属性的每个图像动态获取和添加宽度、高度和 alt 属性。但它只检测第一个图像宽度高度 alt 属性并将它们添加到所有图像中。

$(document).ready(function() {
    var width = $('img').width();
    var height = $('img').height();
    var image_width = $('img').attr('width');
    var image_height = $('img').attr('height');
    var image_alt = $('img').attr('alt');
    if (typeof image_width === 'undefined' || image_width === false && typeof image_height === 'undefined' || image_height === false) {
        $('img').attr('width', width).attr('height', height);
    }
    if (typeof image_alt === 'undefined' || image_alt === false) {
        $('img').attr('alt', 'image');
    }
});

http://jsfiddle.net/a9zsqxov/

Answer 1

您需要遍历您的 img 标签并在每个标签上执行您的逻辑。 "$('img').width()" 只返回它找到的第一张图片的值（正如你发现的那样）。

例如：

$('img').each(function() {
  var $img = $(this),
      width = $img.width(),

  // ..the rest of your logic here..
});

Answer 2

您的逻辑没问题，但您必须遍历所有 img 元素，而不仅仅是第一个元素。这是一个简单的例子：

    $(document).ready(function() {
        $('img').each(function() {
            var width = $(this).width();
            var height = $(this).height();
            $(this).attr('width', width);
            $(this).attr('height', height);
        });
    });