在JQuery多个函数之间使用全局变量

Using Global Variables between multiple functions in JQuery?

本文关键字：全局变量 之间 函数 JQuery      更新时间：2023-09-26

我想用jQuery动态加载一个图像，像这样:

main.js 

 var slidersrc="";  //try to define global variable - not sure if this is correct
 jQuery(document).ready(function() {
     jQuery("#sliderimg").attr('src', slidersrc);
 });
 jQuery("#selection1").click(function() {
     slidersrc='wp-content/themes/*****/slide1.png';
 });

所以用户第一次访问我的网站时，滑块是空的。在用户单击其中一个选择区域之后，我设置了全局变量值。然后，如果用户继续在我的网站上导航到不同的页面，用户应该显示一个滑动条图像作为他的选择的结果。

但是，这似乎不起作用。

我正确使用全局变量在jQuery?或者是否有更好的方法将用户选择值保存在客户端?

谢谢!

全局变量不能从一个页面存活到下一个页面。每个页面都开始一个全新的javascript上下文(所有新的全局变量，函数等)。

如果你想从一页保存状态到下一页，你的选项是:

  1. 把数据放在一个cookie中，当页面加载时，你可以从每个连续的页面中读取数据。
  2. 将数据放在浏览器本地存储中，当页面加载(推荐选项)时，您可以使用javascript从每个连续的页面读取数据。
  3. 将数据存储在服务器上，并在服务器提供数据时将其嵌入到每个页面中。

你可以在这里和这里阅读如何读取和写入浏览器LocalStorage。

如果您计划在每次用户单击时更改滑块图像，那么您可能希望将索引保存到本地存储中的图像数组中。当页面加载时，从localStorage读取当前索引(如果本地存储中不存在值，则提供默认值)，然后将当前值写回localStorage，用于下一页。如果用户采取某些操作导致索引更新为新值，则更新页面，然后将新索引写入localStorage，以便下一页可以从那里读取它，等等。

LocalStorage是一个类似于cookie的概念，但它更容易管理和更有效(数据不会随着每个页面请求发送到服务器)。

相关文章：