如何为相同URL源的图片批量补充Alt标签（仅首图含标签）

Hey folks! If you're dealing with a set of images where multiple instances share the same source URL, but only the first one has an alt (and maybe title) attribute, jQuery makes it easy to copy those attributes over to all matching images. Let's break this down.

Step 1: Make Sure jQuery is Loaded #

First, you need to include the jQuery library in your page. Add this snippet before your custom script (use a local copy or a reliable CDN):

<script src="jquery.min.js"></script>

Step 2: The Solution Script #

Original Approach (Your Provided Code) #

Here's the code you shared, with a quick breakdown of how it works:

$(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); 
});

• It uses an array srcs to track which image sources we've already seen.
• The filter() method separates the first occurrence of each image source from duplicates.
• For the first instance of a source, we store the src, alt, and title in the array.
• Duplicate images are then assigned the alt attribute from the first occurrence.

Improved, More Robust Version #

The original code has a minor quirk with the title += line—it concatenates titles from all images instead of storing the unique title for each source. Here's a cleaner approach using an object to map each source to its specific metadata:

$(function() {
  // Object to store each image src's alt and title attributes
  const imageData = {};

  $("img").each(function() {
    const $thisImg = $(this);
    const imgSrc = $thisImg.attr("src");

    // If we haven't recorded data for this src yet, save it from the first image
    if (!imageData[imgSrc]) {
      imageData[imgSrc] = {
        altText: $thisImg.attr("alt") || "",
        titleText: $thisImg.attr("title") || ""
      };
    } else {
      // Apply the saved alt and title to duplicate images
      $thisImg.attr({
        alt: imageData[imgSrc].altText,
        title: imageData[imgSrc].titleText
      });
    }
  });
});

This version:

• Uses an object for clearer, more organized storage of image metadata.
• Handles cases where an image might not have an alt or title (falls back to an empty string).
• Ensures each image source gets its own unique alt and title copied over, no cross-contamination.

That's it! This script will run once the DOM is ready, automatically filling in missing alt (and title) attributes for all images that share a source with a previously tagged image.

内容的提问来源于stack exchange，提问作者Muhamed Ahmed