Question

所以我更新了我之前提出的问题的代码，但现在图像不会显示，我不知道为什么。应该发生的是，当我单击一个按钮时，图像应该显示并保持在那里即使它刷新，但是直到另一个按钮被点击，新图像应该接管并且同样的事情应该发生，即使页面刷新直到他们点击，也要保持在那里在另一个按钮上，但根本没有图像显示。

这是我的功能：

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;"/>

非常感谢任何帮助，谢谢。

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

Answer 1

看看这个fiddle ..我做了一些调整，这是你想要的吗？

移动了由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();
}

Answer 2

它不会像你想象的那样起作用（来自你的评论）。 #必须完全匹配元素ID之后的内容。您必须为该选择器创建<img id="loadingImage2">，<img id="loadingImage3">等，以便按预期工作。

例如，当$("#loadingImage" + num)创建选择器num = 2时，

#loadingImage2。如果没有具有属性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的所有元素

图像无法正确显示

2 个答案: