Question

我想使用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中的全局变量？或者有更好的方法在客户端保存用户选择值吗？

谢谢！

Answer 1

全局变量不会从一页到另一页存活。每个页面都会启动一个全新的javascript上下文（所有新的全局变量，函数等......）。

如果您想将状态从一个页面保存到下一页，您的选项是：

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

您可以阅读有关如何从浏览器LocalStorage here和here进行读写的内容。

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

LocalStorage与Cookie类似，但它更容易管理，效率更高（每次页面请求都不会将数据发送到服务器）。

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

1 个答案: