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查看源代码中），则找不到添加到图像的任何alt属性。同时，如果我仅分析Firefox中的元素，就会看到alt属性已正确添加到img标签。

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

谢谢。

Answer 1

drop table if exists customer;
drop table if exists serviceticket; 

PRAGMA foreign_keys = ON; 

create table customer (CustID char(6) not null primary key UNIQUE, 
    CustNAME TEXT, 
    STREET TEXT, 
    CITY TEXT, 
    ZIP INT(5),
    EMAIL VARCHAR, 
    PHONENUMBER INT(10)
    );

create table serviceticket (TicketID char(4) not null primary key, 
    TicketNO char(5), 
    WatchID char(6), 
    DateRecieved char(6), 
    ExpectedDelivery char(6), 
    COMMENTS text, 
    DateReturned char(6),
    FOREIGN KEY (CustID) REFERENCES customer (CustID)
    );

insert into customer (CustID, CustNAME, STREET, CITY, ZIP, PHONENUMBER, EMAIL) 
    values (170362, 'James', 'Vvegen', New York, 12345, 8170710520, 'brt92@outlook.com');

insert into serviceticket (TicketID, WatchID, CustID, DateRecieved, DateReturned, ExpectedDelivery, COMMENTS, DateReturned)
    values (6745, 87463, 098636, 124319, 362836, 683743, 'Nothing to say', 583728);

Answer 2

您正在选择下拉列表值时显示图像，但是DOM准备就绪后，jQuery脚本将立即执行。您需要在下拉菜单中执行更改代码，请参考以下代码

注意：假设YourDropDownId是下拉元素的ID，并且图片更改代码正在运行。您需要输入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);
       }
   });
});

通过jQuery添加ALT属性似乎无法按预期工作

3 个答案: