0

我在每次您使用“幻灯片自动前进已停止”的控件导航我的幻灯片时都会显示一个警告框，所以我想知道有没有办法像 cookie 或任何东西一样在本地存储信息，以便如果他们按下控件一次并看到消息，如果他们继续导航，它将停止显示。

JS 脚本

<script>
        $(document).ready( function() {

                $("#pressed1").click( function() {
                    jConfirm('Slideshow auto advance has stopped!<br />Press OK to stop showing this message for 2 hour.', 'Website alert');
                });

            });

        $(document).ready( function() {

                $("#pressed2").click( function() {
                    jConfirm('Slideshow auto advance has stopped!<br />Press OK to stop showing this message for 2 hour.', 'Website alert');
                });

            });

        $(document).ready( function() {

                $("#pressed3").click( function() {
                    jConfirm('Slideshow auto advance has stopped!<br />Press OK to stop showing this message for 2 hour.', 'Website alert');
                });

            });

        $(document).ready( function() {

                $("#pressed4").click( function() {
                    jConfirm('Slideshow auto advance has stopped!<br />Press OK to stop showing this message for 2 hour.', 'Website alert');
                });

            });
</script>

HTML 代码

<div id="main2">  
  <div id="gallery">

    <div id="slides">
    <div class="slide"><img src="imgs/slide.imgs/1.jpg" onmousedown="return false;" style="border-style: none" width="1040" height="400" alt="side" /></div>
    <div class="slide"><img src="imgs/slide.imgs/1.jpg" onmousedown="return false;" style="border-style: none" width="1040" height="400" alt="side" /></div>
    <div class="slide"><img src="imgs/slide.imgs/3.gif" onmousedown="return false;" style="border-style: none" width="1040" height="400" alt="side" /></div>
    <div class="slide"><a href="buywebdesign.html" onmousedown="return false;" target="_blank"><img src="imgs/slide.imgs/4.gif" style="border-style: none" width="1040" height="400" alt="side" /></a></div>
    </div>

    <div id="menu">
    <ul><div class="thumbs">
        <li class="fbar">&nbsp;</li>
        <li class="menuItem"><a href=""><img src="imgs/slide.imgs/thumb_ball.png" id="pressed1" onmousedown="return false;" style="border-style: none" alt="thumbnail" /></a></li>
        <li class="menuItem"><a href=""><img src="imgs/slide.imgs/thumb_ball.png" id="pressed2" onmousedown="return false;" style="border-style: none" alt="thumbnail" /></a></li>
        <li class="menuItem"><a href=""><img src="imgs/slide.imgs/thumb_ball.png" id="pressed3" onmousedown="return false;" style="border-style: none" alt="thumbnail" /></a></li>
        <li class="menuItem"><a href=""><img src="imgs/slide.imgs/thumb_ball.png" id="pressed4" onmousedown="return false;" style="border-style: none" alt="thumbnail" /></a></li>
   </div> </ul>
    </div>
  </div>
</div>
4

2 回答 2

0

我不太了解您的具体要求，但这是一个悬而未决的问题..

您可以使用 window.localStorage （无论页面重新加载如何，浏览器都会为您的网站保留的对象）

您可以设置一个标志，如

$(document).ready( function() {
    window.localStorage['messaged_displayed'] = false;
});

第一次重新加载.. 每当你想显示消息时

if(!window.localStorage['messaged_displayed']) {
    jConfirm('Slideshow auto advance has stopped!<br />Press OK to stop showing this message for 2 hour.', 'Website alert');
    window.localStorage['messaged_displayed'] = true;
}

然后在 2 小时后再次将标志重置为 false。

如果您不知道如何实现，我想编辑 Dylan Hayes 的示例

$(document).ready(function () {
    var msg = "Slideshow auto advance has stopped!<br />Press OK to stop showing this message for 2 hour.";

    $("#pressed1, #pressed2, #pressed3, #pressed4, #pressed5 ").click(function () {
        rightNow = new Date()
        if (window.localStorage['lastClicked'])
        {
            if (rightNow - window.localStorage['lastClicked'] > 7200000) { // milliseconds of 2 hrs
                jConfirm(msg, 'Website alert');
                window.localStorage['lastClicked'] = rightNow
            }
        }
        else {
            window.localStorage['lastClicked'] = rightNow
        }
    });
});
于 2013-05-10T06:12:39.893 回答
0

实际上，我认为您可以在这里做很多事情。

您实际上只需要 1 个 document.ready，并且您的选择器语句中可以有多个元素。

对于您的特定问题，我只需设置一个以 true 开头的布尔值，将显示一次，然后一旦显示消息，它将设置为 false 并且不再将其放入 if() 语句中。

    $(document).ready(function () {
        var msg = "Slideshow auto advance has stopped!<br />Press OK to stop showing this message for 2 hour.";
        var displayAlert = true;

        $("#pressed1, #pressed2, #pressed3, #pressed4, #pressed5 ").click(function () {
            if (displayAlert) {
                jConfirm(msg, 'Website alert');
                displayAlert = false;
            }
        });
    });
于 2013-05-10T03:49:52.883 回答