Question

在我网站的“关于”页面上，单击“下一步”按钮将浏览几张幻灯片。这是使用名为“count”和jquery：

的变量完成的

$("#NextBtn").click(function() {
  count = count + 1
});

和

$("#NextBtn").click(function(){

/*on count=0, the background image is shown*/

if (count==1) {
  $('#slides').slideToggle();
};


if (count==2) {
  $("#slide_1").hide()
$("#slide_2").show()

};

if (count==3) {
  $("#slide_2").hide()
$("#slide_3").show()

};

点击主页上的链接（./*home.html），我想将用户发送到此“关于”页面，并显示幻灯片编号2。

<a href="./*about.html">Click here</a>

我该怎么做？我可以将重定向值传递给“count”吗？我可以告诉jquery如果用户来自主页，请显示幻灯片2吗？

我不知道该做什么......非常感谢你的帮助！

Answer 1

如果您在停留在页面上时显示幻灯片，则只需跟踪变量即可。如果你不是，那么这些是一些方法：

传递GET个数据。见this answer。更改网址（适用于发送链接，不适用于短网址），也可在服务器上看到
传递POST个数据。如果你不能改变服务器（不是一个非常好的服务器），但实际上不是一个选项，但不会改变网址。
设置Cookie。如果有多个标签/窗口，可能会给出奇怪的行为。
添加#位置。我认为这是最合适的，如果你还没有将＃用于别的东西。不会干扰表单GET数据，但允许用户使用正确的幻灯片向朋友发送网址。见this。

TL; DR：将幻灯片编号添加到重定向网址，其前面有#，然后使用window.location.hash在下一页上检索它。

编辑：这是工作示例代码

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
        <script type="text/javascript">
            var def = '#slide1';

            function slide_jump(goal)
            {
                if (goal[0] == '#')
                {
                    goal = goal.substring(1)
                }
                $('[name^="slide"]').hide();
                if (goal)
                {
                    $('[name=' + goal + ']').show();
                }
                else
                {
                    window.location.replace(def);
                    $('[name=#' + goal + ']').show();
                }
            }

            $(document).ready(function()
            {
                slide_jump(document.location.hash);
                $('#nav a').each(function(k, elem)
                {
                    $(elem).click(function (elem, event)
                    {
                        slide_jump($(elem).attr('href'));

                    }.bind(null, elem));
                });
            });
        </script>
    </head>
    <body>
        <div id="nav">
            <a href="#slide1">First</a>
            <a href="#slide2">Second</a>
        </div>
        <div name="slide1">
            Hello and welcome on slide 1!
        </div>
        <div name="slide2">
            So we are on slide 2, then?
        </div>
    </body>
</html>

Answer 2

我可以将重定向值传递给“count”吗？

当然，它只需要一些代码。您可以将查询字符串值附加到要传递到下一页的数据。但由于该值是动态的，因此您需要在JavaScript中处理链接的实际点击。所以链接本身可能是这样的：

<a href="#" id="aboutLink">Click here</a>

在JavaScript中你会做这样的事情：

$('#aboutLink').click(function () {
    window.location = 'about.html?count=' + count;
});

当然，这假设当时count值在范围内。如果不是，则必须找到一种方法使其可用，例如将其移动到更高的范围，或者编写另一个确定当前计数的函数并将其返回。

当然，你后来在下一页上使用这个价值的方式完全是另一个故事。如果一切都是客户端代码（我认为.html扩展名有些暗示），那么你会期待use query string values in JavaScript。

Answer 3

传入变量count：

<a href="./*about.html?count=2">Click here</a>

您可以通过以下方式获取传递的数字：How can I get query string values in JavaScript?

然后，让你的jQuery前进到相应的幻灯片。

jquery发送到新的网页+传递变量

3 个答案: