在所有图像中动态检测和添加宽度、高度和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);
        });
    });