更改图像 alt 标签实际上并没有反映在浏览器中
changing image alt tag does not actually reflect in browser
这是我的 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 标记文本是加载文档时的任何内容。
如何使滚动替代文本正确显示?
确保清除 Web 浏览器的缓存并在之后进行全面刷新
您对 javascript.
进行了编辑
发生这种情况的原因可能是浏览器在页面加载时存储了 alt 标记,然后不反映对其所做的任何更改,如果是这种情况,解决此问题的一种方法是简单地删除图像,并使用新属性重新插入它。
$('#SelectedAssociationImg').replaceWith("<img id='SelectedAssociationImg' src='newSrc' alt='newAlt'/>")
记得将 newSrc
和 newAlt
替换为您想要的任何内容。
alt
不是当您将鼠标悬停在图像上时显示的内容,title
是。
这是我的 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 标记文本是加载文档时的任何内容。
如何使滚动替代文本正确显示?
确保清除 Web 浏览器的缓存并在之后进行全面刷新 您对 javascript.
进行了编辑发生这种情况的原因可能是浏览器在页面加载时存储了 alt 标记,然后不反映对其所做的任何更改,如果是这种情况,解决此问题的一种方法是简单地删除图像,并使用新属性重新插入它。
$('#SelectedAssociationImg').replaceWith("<img id='SelectedAssociationImg' src='newSrc' alt='newAlt'/>")
记得将 newSrc
和 newAlt
替换为您想要的任何内容。
alt
不是当您将鼠标悬停在图像上时显示的内容,title
是。