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

【问题标题】：jquery send to new web page + pass variablejquery发送到新网页+传递变量
【发布时间】：2013-06-21 07:57:05
【问题描述】：

在我网站的“关于”页面上，单击“下一步”按钮将浏览几张幻灯片。这是使用名为“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？

我不知道该怎么办...非常感谢您的帮助！

【问题讨论】：

你可以在所有这个函数之前简单地将 count 初始化为 '2'。

标签： javascript jquery html variables

【解决方案1】：

我可以向重定向传递一个“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。

【讨论】：

【解决方案2】：

传入变量计数：

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

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

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

【讨论】：

【解决方案3】：

如果您在页面上显示幻灯片，您可以简单地跟踪变量。如果你不是，那么这些是几种方法：

传递GET 数据。见this answer。更改网址（适合发送链接，不适合短网址），在服务器上也可见
传递POST 数据。如果您不能更改服务器（否则不是一个很好的服务器），这不是一个真正的选择，但不会更改 url。
设置 cookie。如果有多个选项卡/窗口，可能会出现奇怪的行为。
添加# 位置。我认为这是最合适的，如果您还没有将 # 用于其他用途。不会干扰表单获取数据，但允许用户将带有正确幻灯片的 url 发送给朋友。见this。

TL;DR：将幻灯片编号添加到重定向 url，并在其前面加上 #，然后使用 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>

【讨论】：

这是正确的做法吗？对我不起作用... if (count==2) { window.location.hash = 'this_slide'; $("#slide_1").hide() $("#slide_2").show()}
然后点击这里 ?
对不起，我没有注意到你的回复；我添加了一个有效的示例！