更改图像 alt 标记实际上不会反映在浏览器中

Question

这是我的ajax查询。它从服务器检索一些数据，淡出图像，更改图像，然后将其淡入。

$(document).ready(function() {
setInterval(function() {
$.ajaxSetup({ cache: false });
//alert("launching...");
const rvtoken = $("input[name='__RequestVerificationToken']").val();
const moduleId = @Dnn.ModuleContext.ModuleId;
const tabId = @Dnn.ModuleContext.TabId;
$.ajax({
cache: false,
dataType: 'json',
url: "/DesktopModules/MVC/LH.Home/Home/GetAssociation",
method: "Post",
headers: {
"ModuleId": moduleId,
"TabId": tabId,
"RequestVerificationToken": rvtoken,
"AssociationID": $("#hfAssociationID").val()
},
success: function(data) {
$("#associationDiv").fadeOut(3000,
function() {
$('#discoverLink').attr("href", `/Association/${data.Title}`);
$('#SelectedAssociationLink').attr("href", `/Association/${data.Title}`);
$('#SelectedAssociationImg').attr("src",
`/portals/@Dnn.ModuleContext.PortalId/assets/associations/${data.Slug}/images/img1.png`);
$('#SelectedAssociationImg').attr("alt", `${data.Title} icon`);
});
$("#associationDiv").fadeIn(3000);
$("#hfAssociationID").val(data.AssociationID);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus);
console.log(errorThrown);
console.log(jqXHR);
}
});
},
30000
);
})

一切都按预期工作。href 链接已更改，图像已更改。

问题出在图像的替代文本上。当我检查元素时，我可以观察它的变化，但是当我滚动图像时，显示的 alt 标签文本是加载文档时的任何内容。

如何使鼠标经过的替代文本正确显示？

Answer 1

发生这种情况可能是因为浏览器在页面加载时存储了 alt 标签，然后不反映对其所做的任何更改，如果是这种情况，解决此问题的一种方法是简单地删除图像，然后使用新属性重新插入它。

$('#SelectedAssociationImg').replaceWith("<img id='SelectedAssociationImg' src='newSrc' alt='newAlt'/>")

请记住将newSrc和newAlt替换为您想要

的任何内容。

Answer 2

alt

不是将鼠标悬停在图像上时显示的内容，title是。

Answer 3

确保清除 Web 浏览器的缓存并在之后进行完全刷新 你对你的JavaScript进行编辑。