在JQuery中的多个函数之间使用全局变量？ [英] Using Global Variables between multiple functions in JQuery?

问题描述

main.js

我想用这样的jQuery动态加载图片：
 >  var slidersrc =; //尝试定义全局变量 - 不确定这是否正确
 
 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读取和写入此处和此处。

如果您打算每次用户单击时更改滑块图像，则perh aps要将索引保存到本地存储器中的映像阵列中。加载页面时，您从localStorage中读取当前索引（如果本地存储中没有值，则提供默认值），然后将当前值写回到下一页的localStorage。如果用户执行了一些操作，导致索引更新为新值，则更新页面，然后将该新索引写入localStorage，以便下一页可以从那里读取等等。

LocalStorage与Cookie类似，但管理起来更容易一些，而且效率更高（数据不会在每个页面请求时发送到服务器）。

I want to dynamically load an image using jQuery like this:

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';
 });

So the first time user access my website, the slider is empty. After user clicks on one of the selection areas, I set the global variable value. Then if user continues to navigate at my website to different pages, the user should be shown a slider image as a result of his selection.

However, this doesn't appear to work.

Am I correctly using the global variable in jQuery? Or is there a better way to save the user selection value in client side?

thanks!

解决方案

Global variables do NOT survive from one page to the next. Each page starts an entirely new javascript context (all new global variables, functions, etc...).

If you want to save state from one page to the next, your options are:

1. Put the data in a cookie which you can read from each successive page when that page loads.
2. Put the data in a browser local storage which you can read with javascript from each successive page when that page loads (recommended option).
3. Store the data on the server and embed it in each page as it is served from the server.

You can read about how to read and write from browser LocalStorage here and here.

If you're planning on changing the slider image each time the user clicks, then perhaps you want to save an index into an image array in local storage. When the page loads, you read the current index from localStorage (or supply a default value if no value exists in local storage), then write back the current value to localStorage for the next page. If the user takes some action that causes the index to update to a new value, then you update your page and then write that new index into localStorage so the next page can read it from there and so on.

LocalStorage is a similar concept to cookies, but it's a bit easier to manage and more efficient (the data is not sent to the server with every page request).

这篇关于在JQuery中的多个函数之间使用全局变量？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！