“如果” javascript 中的声明 &在标签中显示结果

Question

我有一个注册表单，客户可以通过下拉列表选择他们想要的套餐。然后，他们通过选择“是”或“否”单选按钮来选择是否希望利用多年折扣。如果选择“是”单选按钮，则会显示一个下拉列表（使用 JavaScript），其中包含 1-3 年的选择。 我对 javascript 一点也不熟悉，接下来我需要做的是，当客户选择第 1、2、3 年进行多年折扣时，计算此折扣，并在下拉列表旁边的标签中显示或隐藏此标签，如果客户选择了“否”或“多年折扣”。

这是我现有的代码： 隐藏年度折扣下拉列表的 Javascript

<script type='text/javascript'>

$(function(){

 $('#discountselection').hide();

    $('#No').click(function(){
        $('#discountselection').hide();
    });

    $('#Yes').click(function(){
        $('#discountselection').show();
    });

});

</script>

下面是 HTML 代码：

        <td width="343">Package*</td>

        <td colspan="4">

        <select class="purple" name="package">

            <option value="Standard">Standard - &euro;55 Monthly</option>

            <option value="Premium" selected="selected">Premium - &euro;99 Monthly</option>

            <option value="Platinum">Platinum - &euro;149 Monthly</option>

        </select>

        </td>

        <tr>

        <td width="343">Would You like to avail of our multiyear discounts?*

        <br />See <a href="#dialog" name="modal">Pricing</a> for more details

        </td>

        <td colspan="4">

            <input name="discount" type="radio" id="Yes" value="Yes" />Yes

            <input name="discount" type="radio" id="No" value="No" checked="checked" />No<br />  

            <select name="discountselection" class="purple" id="discountselection">

                <option value="1" selected="selected">1 Year</option>

                <option value="2">2 Years</option>

                <option value="3">3 Years</option>  

            </select>                  

        </td>

这将是我需要在 javascript 中执行以计算价格的 IF 语句：

if package == "standard" && discountselection == "1"
{
    cost = 45 * 12;
    //display cost in label
}   
elseif package == "standard" && discountselection =="2"
{
    cost = 45 * 24; 
    //display cost in label
}
elseif package == "standard" && discountselection =="3"
{
    cost = 45 * 36;
    //display cost in label
}
elseif package == "premium" && discountselection =="1"
{
    cost = 85 * 12; 
    //display cost in label
}
elseif package == "premium" && discountselection =="2"
{
    cost = 85 * 24;
    //display cost in label
}
elseif package == "premium" && discountselection =="3"
{
    cost = 85 * 36;
    //display cost in label
}
elseif package == "platinum" && discountselection =="1"
{
    cost = 134 * 12;
    //display cost in label 
}
elseif package == "platinum" && discountselection =="2"
{
    cost = 134 * 24;
    //display cost in label
}
else package == "platinum" && discountselection =="3"
{
    cost = 134 * 36;
    //display cost in label
}

我只是不确定如何在 Javascript 中创建此 IF 语句。如果有人可以提供任何建议、帮助或教程链接来帮助我，我将非常感激。

Answer 1

在 JavaScript 中，else 和 if 必须是单独的单词。在 javascript 中，if 语句的条件必须或应该括在括号中。所以：

if(package == "standard" && discountselection == "1")
{
    cost = 45 * 12;
}   
else if(package == "standard" && discountselection =="2")
{
    cost = 45 * 24; 
}

等等。但是，如果我是你，我会考虑做一些更自动化的事情。我讨厌重复打字！

var discount = {1: 12, 2: 24, 3: 36};

var package_prices = {'standard': 45, 'premium': 85, 'platinum': 134 };

var cost = package_prices[package] * discount[discountselection];

现在 cost 应该是正确的，看看您节省的所有精力。

注意：我在这里遵循了您的示例代码，但在您的实际 HTML 中，您的选项值有一个大写的第一个字符，所以实际上这会失败，除非修改 package_prices 变量以适应（例如 'Standard': 45 而不是 'standard': 45）

如果您正在寻找有关 Javascript 的良好参考资料，而不是更详细的教程，那么Mozilla 开发者中心，例如，这里是他们的 if/else 文档。

Answer 2

我希望我正确理解了您的问题，但是如果用户从您的选择框中选择了一个值，您将尝试显示带有成本的标签。

如果您可以通过使用更改事件（由 jQuery 提供）来完成此操作。

$("#discountselection").change(function()  { 
    var product_cat = $("#package option:selected").val();

    if(product_cat == "standard") {
       product_prefix = 45;
    } else if (product_cat == "premium") {
       product_prefix = 85;
    } else if (product_cat == "platinum") {
       product_prefix = 134;
    }

    var selected_value = $("#discountselection option:selected").val();
    var cost = product_prefix * (12 * selected_value);
    $("#costlabel").val(cost);
}); 

但请注意，您应该在服务器上仔细检查这些值！