оператор if в javascript и отображение результата в метке

Question

У меня есть форма регистрации, в которой клиент выбирает нужный пакет через выпадающий список. Затем они выбирают, хотят ли они воспользоваться многолетней скидкой, выбирая переключатели Да или Нет. Если выбран переключатель «Да», отображается раскрывающийся список (с использованием JavaScript) с выбором лет 1-3. Я вообще не знаком с javascript, и что мне нужно делать дальше, это когда покупатель выбирает год, 1, 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>

Это будет оператор IF, который мне нужно будет выполнить в javascript для расчета цены:

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
}

Я просто не уверен, как создать этот оператор IF в Javascript. Если бы кто-нибудь мог предложить какой-либо совет, помощь или ссылки на учебники, которые могли бы помочь мне в этом, я был бы очень признателен.

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 Developer Center , например, вот их 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);
}); 

Но учтите, что вам следует дважды проверить эти значения на сервере!