通过jQuery添加Alt属性似乎无法正常工作

Question

我正在尝试将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 View源代码中，我找不到在图像中添加的任何Alt属性。与此同时

为什么？怎么了？我应该如何编辑它，以使页面加载后尽快将ALT属性添加到代码中？对于我来说，这对我来说很重要。

预先感谢。

Answer 1

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

Answer 2

您在选择下拉值时显示图像，但是jQuery脚本在DOM准备就绪后立即执行。您需要在更改下拉的情况下执行代码，请参阅下面的代码

注意：假设YourDropDownId是下拉元素的ID，图像Alter代码正在工作。您需要放置Dropdwon的精确ID，如果不存在ID，请参考不同的jQuery选择器以绑定更改事件处理程序。

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