输出要在HTML中使用的JavaScript变量 [英] Outputting a JavaScript variable to use in HTML

问题描述

我正在尝试创建一个javascript/html产品配置器，我希望在其中具有多个阶段并将变量输出到下一个阶段，让我们说:

I'm trying to create a javascript/html product configurator where I want to have several stages and output variables into the next stage, lets say:

我正在配置汽车，第一步，我选择颜色，颜色输出到下一个阶段，即车轮，(即构建它，以便配置器的每个阶段都使用不同的页面)，因为我选择了车轮颜色，我可以看到汽车的其余部分显示了我之前选择的颜色，依此类推，经过了另外两个阶段，现在我对我的汽车很满意，我想通过确认来确定报告，其中应包含我所有的选择在此过程中制作的，如下所示:

I'm configurating a car, first step I choose the color, color is outputed to the next stage, the wheels, (im building it so every stage of the configurator uses a different page) as im choosing the wheel color, I can see that the rest of the car shows the color I selected before, and so on through 2 more stages so now that im happy with my car, I want to confirm, by confirming, a report should be outputed with all the choices I made during the process, as so:

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

我认为，如果所有这些都在同一个页面中完成会更容易，但是问题是，我将龙门框架与wordpress结合使用，并且它具有这个惊人的灯箱，我使用它来使一切变得更漂亮，我输入了链接:

I think it would be easier if this was all done in the same page, but the thing is, im using wordpress with the gantry framework, and it has this amazing lightbox which im using to make it all more beautiful, I input a link:

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

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

and when the user clicks, a lightbox pops up with everything in the configurator.htm which holds everything about my configurator, the HTML and includes for the CSS and JavaScript.

所以，如果我有:

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

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

can I output variables from the first into the second, into the third... and so on, so I can output everything in the results page?

另外，我了解了局部变量和全局变量，以及全局变量可能导致的问题，例如，即时消息正在使用配置程序，而另一个用户正在同时使用配置程序，如果变量是全局的，如果我选择黑色，他的选择转向黑人，反之亦然?当然，假设我们在不同的计算机上执行此操作.为了防止这种情况，可以将局部变量输出到配置器的后续步骤吗?怎么样?

also, I read about local and global variables and the problems global variables might cause, for example, im using the configurator and another user is using the configurator at the same time, if the variables are global, if I choose black will his choice turn to black or vice versa? assuming we are doing this on different computers, of course. to prevent this, can local variables be outputed to the following step of the configurator? how?

正如我所说，这对javascript来说是非常陌生的，所以这似乎是一件容易的事或一件不可能的事，如果不可能的话，请告诉我，我将尝试找到一种解决方法，但我认为这是可能的，我我曾经看过类似的配置器，但我只是不知道他们是如何做到的.

As Isaid, im very new to javascript, so it might seem an easy thing to do or an impossible thing, if it is impossible just tell me, i'll try and find a workaround, but I think its possible, i've seen similar configurators, I just dont know how they do it.

推荐答案

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

You could append the attributes that you want to use on the next page as URL parameters on the link to the next page. Assign variables to each of the URL parameters and then use them on the corresponding pages.

$(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. 
});

这是一个小提琴，向您展示我的意思.单击红色"链接后，使用开发人员工具的下一个按钮查看它是否已更新为包含URL参数.

Here's a Fiddle to show you what I mean. After you click the 'RED' link, using dev tools the next button to see that it's updated to include the URL parameter.

这篇关于输出要在HTML中使用的JavaScript变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！