Question

我正在为公司网站编写一个程序，允许他们在手机上做报价，这是他们手工做了一段时间的过程。他们出售的东西之一是屋顶的山脊帽。该项目的价格由用户做出的4个决定定义。

客户定价级别，有3个选项（单选按钮）
条件，2种选择（平面或雕刻，下拉框）
颜色，有4种选择（下拉框）
宽度，有14个选项（下拉框）

到目前为止，我已经使用一个巨大的If ... else if语句定义了这个变量，该语句超过1000行代码。问题是大多数产品是相同的，按此速度完成需要几个月的时间。我将在下面发布我的HTML，然后是脚本。提前感谢任何可以提供帮助的人。（注意：我只发布了我认为有必要帮助处理我的问题的代码，假设我知道周围的标签，如表等。）

用于颜色选择的HTML ...（每种颜色都会改变价格）

<td><form name="form2" method="post" action="">
<label for="color"></label>
<select name="color" id="color">
 <option value="galvanized">galvanized</option>
 <option value="galvalume">galvalume</option>
 <option value="metallic copper">metallic copper</option>
 <option value="red">red</option>// there are many painted colors which is why i use "else" for this price change.
</select>
</form>

修剪的HTML ...（条件和宽度的选择）

<td>Ridge:</td>
<td><select id="ridgeChoice" name="ridgeChoice">
<option value="Sculpted">Sculpted</option>
<option value="Flat">Flat</option>
</select>&nbsp;Qty:
<input id="ridgeTrim" type="text" value="" size="3">&nbsp; Width:<select id="ridgeWidth" name="ridgeWidth">
<option value="13">13"</option>
<option value="16">16"</option>
<option value="18">18"</option>
<option value="20">20"</option>
<option value="22">22"</option>
<option value="24">24"</option>
<option value="26">26"</option>
<option value="28">28"</option>
<option value="30">30"</option>
<option value="32">32"</option>
<option value="34">34"</option>
<option value="36">36"</option>
<option value="38">38"</option>
<option value="40">40"</option>
</select>
</td>

价格水平的HTML只是一个有三个选项的广播组，也会影响价格。

...的Javascript

var ridgeChoice=document.getElementById("ridgeChoice").value;
var ridgeWidth=document.getElementById("ridgeWidth").value;

var ridgePrice;
if (ridgeChoice=="Sculpted")
{
if (retailPrice.checked)
{
    if (ridgeWidth=="13")
        {
            if(colorChoice=="galvalume")
            {
                ridgePrice=14.70;
            }
            else if (colorChoice=="metallic copper")
            {
                ridgePrice=19.55;
            }
            else if (colorChoice=="galvanized")
            {
                ridgePrice=13.35;
            }
            else
            {
                ridgePrice=16.65;
            }
        }
                   else if (ridgeWidth=="16")
        {
            if(colorChoice=="galvalume")
            {
                ridgePrice=21.30;
            }
            else if (colorChoice=="metallic copper")
            {
                ridgePrice=29.50;
            }
            else if (colorChoice=="galvanized")
            {
                ridgePrice=20.5;
            }
            else
            {
                ridgePrice=22.90;
            }
        }

这会持续1000行。有没有更好的方法根据许多不同的用户选择定义变量？

Answer 1

为什么不在选项和价格中添加属性文件。由于属性文件适用于键值对，您只需从用户选择中获取相应的键，然后从“属性”中获取相应的价格。这也将使您无需硬编码价格和颜色。您可以在html中创建下拉列表，然后使用javascript填充它。您可以将属性文件读取逻辑放在java文件中，该文件可以在您的javascript中引用。

您的属性文件可能如下所示：

galvalume=14.70
galvanized=13.35

希望它有所帮助！

如何根据多个用户选择有效地定义变量？

1 个答案: