jQuery将alt标签添加到具有相同src的图像

Question

有很多图片具有相同的 URL 来源，但只有第一张图片有 Alt 标签，那么如何将 alt 添加到具有相同来源的另一张图片？

$(function(){
    var srcs = [],
        alt = '',
        title = '',
        temp;
    $("img").filter(function(){
        temp = $(this).attr("src");
        alt = $(this).attr("alt");
        title += $(this).attr("title");

        if($.inArray(temp, srcs) < 0){
            srcs.push(temp);
            srcs.push(alt);
            srcs.push(title); 
            return false;
        }
        return true;
    }).attr('alt',alt);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="colourDots">
   <img alt="aaa" title="axxx" src="/out/pictures/generated/product/8/300_450_100/60028.bl.jpg"/><br>
   <img src="/out/pictures/generated/product/8/300_450_100/60028.bl.jpg"/><br>
   <img  alt="bbb" title="axxx" src="/out/pictures/generated/product/8/300_450_100/60028.bl.jpg"/><br>
   <img src="/out/pictures/generated/product/8/300_450_100/60028.sw.jpg"/><br>
   <img src="/out/pictures/generated/product/8/300_450_100/60028.bl.jpg"/><br>
   <img src="/out/pictures/generated/product/8/300_450_100/60028.bl.jpg"/><br>
   <img src="/out/pictures/generated/product/8/300_450_100/60028.bl.jpg"/><br>
</div>

我只需要过滤图像即可

具有相同源 URL 的所有图像。

将alt标签复制到其他没有alt但来源网址相同的图片

Answer 1

1. 获取所有唯一的 src 属性，
2. 对于每个唯一的 src 属性，获取所有使用它的图像
3. 对于每个集合，找到具有alt 的成员，然后将其分配给整个集合。

在代码中：

const uniques = [];
const imgs = $('img');

imgs.each(function () {
  let src = this.src;
  if (uniques.indexOf(src) === -1) uniques.push(src);
});

uniques.forEach(src => {
  let srcd = imgs.filter("img[src='"+src+"']");
  let alt = srcd.filter('[alt]').first().attr('alt');

  srcd.each( function() {
    $(this).attr('alt',alt);
  })
});

Answer 2

第一个版本（使用 cmets）仅将 alt 的第一个实例的值分配给所有图像：

$(function () {
    // Get value of first instance of 'alt' for images within elements of the given class
    var alt = $(".colourDots img[alt]").first().attr("alt");
    // If value of 'alt' is not null or undefined
    // (Note, use != and not !== for this test)
    if (alt != null) {
        // Iterate images within elements of class .colourDots
        $.each($(".colourDots img"), function () {
            // assign value of var alt to each image
            $(this).attr("alt", alt);
        });
    }
});

第二个版本将元素的alt 值分配给后续图像（因此您的问题中的alt="bbb" 被拾取并分配给后续图像）：

$(function () {
    // Define a holding variable
    var alt;
    // Iterate images
    $.each($(".colourDots img"), function () {
        // If element has 'alt', assign the value to var alt
        if ($(this).attr("alt") != null) {
            alt = $(this).attr("alt");
        }
        // otherwise assign the value of var alt to the image
        else {
            $(this).attr("alt", alt);
        }
    });
});

您可以根据自己的具体需求进行选择。