javascript - Jquery 中选择选项的更改功能问题

Question

我有一个小的选择表格。当我使用 JQUERY 更改选项时，新的合适价格出现在 .prices 中。旧价格是 100 $。如果用户是学生或小学生，我想让他打折 -10 美元。因此，当用户选择学生或学生选项时，价格从 100 美元更改为 90 美元。但是当用户再次向学生选择选项时，它不能改变价格，而是将其更改为 80 $。再次选择学生选项时，价格更改为 70。我完全希望如果用户选择选项:学生或小学生，将有 -10 美元的折扣。

你能问我为什么要用each function吗？选项:other 被选中，第一次页面显示价格 110$。每个功能都解决了这个问题。我也有 JS fiddle ，你可以检查一下。对不起我的英语。

DEMO

HTML

<select name="status" id="status">
    <option value="1">Student</option>
    <option value="2">Pupil</option>
    <option value="3" selected>Other</option>
</select>

<div class="price">
    <span class="prices">100</span> $
</div>

JQUERY

$( "#status" ).change(function () {

    var price2 = ($(".prices").text());

    $('.prices').text('');

    var value = $( "#status option:selected" ).val();

    if(value=="3")
    {     
        new_price2 = +price2 +  +10;       
        $('.prices').append(new_price2);
    }

    else
    {
        new_price2 = price2 - 10;     
        $('.prices').append(new_price2);
    }
})
.change();

$('#status option').each(function() {

 if(this.selected)
  {
    var price2 = ($(".prices").html());
    $('.prices').html('');

    new_price2 = price2 - 10;
    $('.prices').append(new_price2);
  }

});

Answer 1

您只需要在 jQuery 代码中使用 change 处理程序。此外，您需要保留一个静态的基本价格值，以便您可以对其进行所有计算，而不是保留所有更改的运行总计。试试这个:

$("#status").change(function () {
    var price2 = $(this).data('base-price');
    if ($("option:selected", this).val() == "3") {
        new_price2 = price2;
    } else {
        new_price2 = price2 - 10;
    }
    $('.prices').text(new_price2);
}).change();

Example fiddle