javascript - 输出要在 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

我可以将变量从第一个输出到第二个、第三个...等等，这样我就可以在结果页面中输出所有内容吗？

此外，我还了解了局部变量和全局变量以及全局变量可能导致的问题，例如，我正在使用配置器，而另一个用户同时使用配置器，如果变量是全局的，如果我选择黑色将会他的选择变成黑色还是相反？当然，假设我们在不同的计算机上执行此操作。为了防止这种情况，是否可以将局部变量输出到配置器的以下步骤？怎么办？

正如我所说，我对 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. 
});

这是一个 Fiddle告诉你我的意思。单击“RED”链接后，使用开发工具的下一步按钮可以看到它已更新为包含 URL 参数。