1

我有多个按钮，当单击它们时，会加载图像，并且即使页面刷新，图像也应该保持在那里。当我使用此按钮时，即使我单击其他按钮，也会始终显示具有最高 setItem 值的按钮。我该如何解决？

这是其中一个脚本：

<script type="text/javascript">
            var isImage1 = sessionStorage.getItem('2');

            function showImage1() {
            sessionStorage.setItem('isImage1', '2');
            $("#loadingImage1").show();
            $("#loadingImage").hide();
            $("#loadingImage2").hide();
            $("#loadingImage3").hide();
            $("#loadingImage4").hide();
            $("#loadingImage5").hide();
            $("#loadingImage6").hide();

            }
            if(isImage1 == 2) showImage1();

        </script>

这是我的按钮之一：

 <input name="EPL/MECH DESIGN - TECHS" style="white-space:normal"  
   onclick="moveText(this.name);showImage1();form1.submit()" 
 style="width: 275px"  type="button" value="7SBD EPL/Mech. Design Techs" />

更新：我已经更新了这一行

 var isImage1 = sessionStorage.getItem('2');

至

   var isImage1 = sessionStorage.getItem('isIamge1');

但是我的问题仍然存在，即使我单击其他按钮，具有最大值的 isImage 仍然存在，因此仍然需要帮助。

4

2 回答 2

2

在您的会话存储中，您将“isImage1”项的值设置为“2”

sessionStorage.setItem('isImage1', '2');

但是在您检索值的代码中，您实际上是在检索项目“2”

var isImage1 = sessionStorage.getItem('2');

您需要更改 sessionStorage.getItem 以引用“isImage1”

var isImage1 = sessionStorage.getItem('isImage1');

然后你应该得到你期望的值。

会话存储上有很多好的 jsfiddles。你可能会从中得到一些想法：

http://jsfiddle.net/gabrieleromanato/XLRAH/

顺便说一句；这是您存储的一个非常小的值，为什么不将它存储在 cookie 中呢？

编辑：

基于您具有与此完全相同的多个功能这一事实，您最好遵循 Ken 的解决方案，我唯一要添加的是通配符来关闭其他图像：

function showImage(imgNum) {
            sessionStorage.setItem('Image',imgNum);
            $("[id^=loadingImage]").hide();
            $("#loadingImage" + imgNum).show();

}

showImage(sessionStorage.getItem('Image'));

按钮中的代码将是 showImage(1) 而不是 showImage1();

_佩斯

于 2013-07-25T22:01:43.283 回答
1

通过稍微重构代码，您可以执行以下操作：

/// setup some vars including max number of images
var maxImages = 6, i = 1, v;

/// now loop through and get the items for each image
for(; i =< maxImages; i++) {
    v = sessionStorage.getItem('isImage' + i);

    /// if in storage, call show image with the number to show
    if (v !== null) showImage(i);
}

/// show image based on number
function showImage(num) {

    sessionStorage.setItem('isImage' + num, '1');
    $("#loadingImage" + num).show();
}

另请注意，sessionStorage仅处理字符串。因此，为了检查特定数字，您需要先将其转换为一个parseInt(value, 10);。

但在这种情况下1，我们设置的值可以是任何东西——它只是为了存储一些值，所以sessionStorage不返回null。

在按钮代码中，您可以将其更改为：

<input name="EPL/MECH DESIGN - TECHS" style="white-space:normal"  
onclick="moveText(this.name);showImage(1);form1.submit()" 
style="width: 275px"  type="button" value="7SBD EPL/Mech. Design Techs" />
于 2013-07-25T22:02:36.350 回答