图像没有'无法正确显示

Images doesn't display correctly

本文关键字：显示 图像      更新时间：2023-09-26

所以我已经更新了以前问过的问题的代码，但现在图像无法显示，我不知道确切的原因。应该发生的是，当我单击一个按钮时，即使刷新了，图像也应该显示并保持在那里，但直到单击另一个按钮，新图像应该接管，同样的事情也应该发生，即使页面刷新，也保持在那里直到他们单击另一按钮，但根本不显示图像。

这是我的功能：

var maxImages=7,i=1,v;
for(i;i=<maxImages;i++)
{
    v = sessionStorage.getItem('v'+i);
    if(v !== null) showImage(i);
}
function showImage(num)
{
    sessionStorage.setItem('v' + num, '1');
    $("#loadingImage" + num).show();
}

这是我的按钮功能：

<input name="Failure Analysis Lab" style="white-space:normal;" 
 onclick="moveText(this.name);showImage(1);form1.submit();" 
 style="width: 272px; height: 30px;" type="button" 
 value="7QKD Failure Analysis Lab" />

这是我的图像标签：

<img id="loadingImage" alt="" src="images/Overview.gif" 
 style="width:85%;; margin-bottom:3em; display:none;"/>

如有任何帮助，我们将不胜感激，谢谢。

附加信息：当我检查控制台时，我没有得到任何错误，但没有显示任何图像。

看看这个小提琴。。我做了一些调整，这就是你想要的吗？

已移动要由jQuery处理的单击事件。。。并且在每个输入上设置数据以检查它想要显示哪个图像。

var v = sessionStorage.getItem('imageId');
if (v !== null) {
    showImage(v);
}
$("input").on("click", function () {
    var imageId = $(this).attr("imageId");
    showImage(imageId);
});
function showImage(imageId) {
    var img = $("#" + imageId);
    var hidingImg = sessionStorage.getItem('imageId');
    $("#" + hidingImg).hide();
    sessionStorage.setItem('imageId', imageId);
    img.show();
}

它并没有按照你的想法（从你的评论中）工作。#之后的内容必须与元素ID完全匹配。您必须创建<img id="loadingImage2">、<img id="loadingImage3">等，才能使选择器按您的意愿工作。

例如，当num = 2创建选择器#loadingImage2时，$("#loadingImage" + num)。如果没有属性为id="loadingImage2"的元素，则此行将无效。您可以调用show()，jQuery将尽最大努力显示该元素，但您想要显示的元素并不存在。

因此，假设您有多个loadingImages，请将HTML更改为以下内容：

<img class="loadingImage" src="image1.jpg">
<img class="loadingImage" src="image2.jpg">
<!-- And so on -->

然后在jQuery中，选择并显示带有$(".loadingImage").show(); 的类loadingImage的所有元素

相关文章：