输出要在HTML中使用的JavaScript变量

Question

我正在尝试创建一个javascript / html产品配置器，我希望在下一阶段有几个阶段和输出变量，让我们说：

我正在配置一辆车，第一步我选择颜色，颜色输出到下一个阶段，车轮，（我建造它，所以配置器的每个阶段使用不同的页面）作为我选择车轮颜色，我可以看到汽车的其余部分显示我之前选择的颜色，依此类推2个阶段，所以现在我很满意我的汽车，我想确认一下，报告应该在我做出的所有选择中得到证实。过程，如下：

Color:Black
Rims:White
Interior: Black Leather
Special: Vinil "Carbon Fiber" Hood Effect

我认为如果这一切都在同一页面完成会更容易，但问题是，我使用wordpress与龙门架，并且它有这个惊人的灯箱，我用来使它更美丽，我输入一个链接：

<a href="http://www.example.com/configurator.htm" rel="rokbox [width height]>Configurator</a>

当用户点击时，会弹出一个灯箱，其中包含configurator.htm中的所有内容，其中包含有关我的配置器，HTML以及CSS和JavaScript的所有内容。

所以，如果我有：

configurator_color.htm
configurator_wheels.htm
configurator_interior.htm
configurator_special.htm
configurator_results.htm

我可以将变量从第一个输出到第二个，输入第三个......依此类推，所以我可以输出结果页面中的所有内容吗？

另外，我读到了局部和全局变量以及全局变量可能导致的问题，例如，我使用配置器而另一个用户同时使用配置器，如果变量是全局的，如果我选择黑色，他的选择将转向黑色，反之亦然？ 假设我们在不同的计算机上这样做，当然。 为了防止这种情况，可以将局部变量输出到配置器的以下步骤吗？ 怎么样？

作为Isaid，我对javascript很新，所以它似乎是一件容易的事情或者一件不可能的事情，如果不可能告诉我，我会尝试找到一个解决方法，但我认为它可能，我见过类似的配置器，我只是不知道他们是如何做到的。

Answer 1

您可以将要在下一页上使用的属性作为URL参数附加到下一页的链接上。 为每个URL参数分配变量，然后在相应的页面上使用它们。

$(function(){
 // append the link to the next page with the color URL parameter
 $('.red-color-selection').on('click',function(){
    $('.next-button').attr('href', function() {
        return this.href + '?color=red';
    });
 });
 // Get URL Params and turn them into variables
 $.extend({
  getUrlVars: function(){
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
      hash = hashes[i].split('=');
      vars.push(hash[0]);
      vars[hash[0]] = hash[1];
    }
    return vars;
  },
  getUrlVar: function(name){
    return $.getUrlVars()[name];
  }
 });
 // set the carColor variable to the value of the color URL parmeter
 var carColor = $.getUrlVar('color');

 // do stuff down here to set your car's color what the user had selected on the previous page. 
});

这是一个小提琴 ，向您展示我的意思。 单击“RED”链接后，使用开发工具下一个按钮，看到它已更新为包含URL参数。