通过jquery添加ALT属性似乎无法达到预期效果

Question

我正在尝试将alt属性自动分配给没有alt属性的图像。这是我的代码：

$(document).ready(function () {
    var attr = $(this).attr('alt');
    if (typeof attr === typeof undefined || attr === false) {
        $('img').each(function () {
            var $img = $(this);
            var filename = $img.attr('src');
            $img.attr('title', filename.substring((filename.lastIndexOf('/')) + 1, filename.lastIndexOf('.')));
            $img.attr('alt', filename.substring((filename.lastIndexOf('/')) + 1, filename.lastIndexOf('.')));
        });
    }
});

我有一个国家的旗帜图像下拉选择器。在用户不单击下拉选择器之前，不会显示图像。我认为这导致代码不能像预期的那样工作。

如果我检查页面的输出，例如在Firefox视图源代码中，我找不到添加到图像中的任何alt属性。同时，如果我只是分析Firefox中的元素，我会看到alt属性被正确地添加到img标记中。

为什么？怎么了？我应该如何编辑它，以便页面在加载时总是将alt属性添加到代码中？这对我来说对于页面可访问性很重要。

提前谢谢。

Answer 1

$("img").prop("alt", "This is some alt text");

Answer 2

您在选择下拉值时会显示图像，但一旦DOM准备就绪，就会执行jquery脚本。您需要在下拉列表更改时执行您的代码，请参考以下代码

注意:假设YourDropDownId是dropdown元素的id，并且image alter code正在工作。您需要输入dropdwon的确切id，如果id不存在，则引用不同的jquery selector来绑定更改事件处理程序。

$(document).ready(function () {
    $('#YourDropDownId').on('change', function(){
        $('img').each(function () {
            var $img = $(this);
            var filename = $img.attr('src');
            var value = filename.substring((filename.lastIndexOf('/')) + 1, filename.lastIndexOf('.'));
            $img.attr('title', value);
            $img.attr('alt', value);
        });
    });
});

Answer 3

jQuery(document).ready(function () {
   jQuery("img").each(function(){
       if(!jQuery(this).attr("alt")  || jQuery(this).attr("alt") == ''){
            var filename = jQuery(this).attr('src');
            var alt = filename.substring((filename.lastIndexOf('/')) + 1, filename.lastIndexOf('.'));
            jQuery(this).attr("alt", alt);
       }
   });
});