jQuery修改图片alt属性无效，求问题排查方案

核心问题 #

1. 第二段代码逻辑完全错误：$(this).attr('alt', 'Blog Image')是设置属性的操作，返回的是jQuery对象而非属性值，导致! $(this).attr('alt', 'Blog Image')永远为false，这段代码根本不会执行你预期的逻辑。
2. 重复遍历+逻辑冲突：两段代码重复遍历所有图片，第一段给无alt的图片设空alt，第二段逻辑失效，整体逻辑混乱。
3. 可能存在DOM加载时机问题：如果代码在DOM完全渲染前执行，$('body img')找不到任何元素，自然不会生效。

修复后的代码（jQuery版） #

先确保代码在DOM就绪后执行，同时合并逻辑，按需设置alt文本：

$(document).ready(function() {
    $('body img').each(function() {
        const $img = $(this);
        // 检查alt属性是否不存在或为空
        if (!$img.attr('alt') || $img.attr('alt').trim() === '') {
            // 根据图片用途设置：装饰图设空alt，内容图设描述性文本
            // 示例：文章内图片统一设为"文章配图"，可根据实际场景调整
            $img.attr('alt', '文章配图');
            
            // 进阶：区分装饰图和内容图（给装饰图加.decorative-img类）
            // if ($img.hasClass('decorative-img')) {
            //     $img.attr('alt', '');
            // } else {
            //     $img.attr('alt', '文章配图');
            // }
        }
    });
});

无依赖原生JS版（推荐，避免jQuery兼容问题） #

document.addEventListener('DOMContentLoaded', function() {
    const imgs = document.querySelectorAll('body img');
    imgs.forEach(img => {
        if (!img.alt || img.alt.trim() === '') {
            // 按需设置alt文本
            img.alt = '文章配图';
            
            // 装饰图处理示例
            // if (img.classList.contains('decorative-img')) {
            //     img.alt = '';
            // } else {
            //     img.alt = '文章配图';
            // }
        }
    });
});

无障碍最佳实践提醒 #

• 纯装饰性图片：必须设置alt=""（空alt），让屏幕阅读器跳过它。
• 内容类图片：设置准确描述图片内容的alt文本，不要用"Blog Image"这种模糊表述，提升无障碍体验。

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