3

我正在尝试创建一个 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 很陌生，所以这似乎是一件容易做的事情或一件不可能的事情，如果不可能，请告诉我，我会尝试找到一种解决方法，但我认为它是可能的，我已经看到了类似的配置器，我只是不知道他们是怎么做到的。

4

1 回答 1

0

您可以将要在下一页上使用的属性作为 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 参数。

于 2014-04-11T02:06:00.333 回答