在Jquery中選擇選項的更改函數問題

Question

我有一點選擇形式。 當我使用JQUERY更改選項時， .prices出現新的合適價格。 舊的價格是100美元。 如果用戶是學生或學生，我想讓他折扣-10 $。 因此，當用戶選擇選項時，學生或學生的價格從100變為90 $。 但是當用戶再次向學生選擇選項時，它不能改變價格，而是將其改為80 $。 再次選擇期權學生時，價格變為70.我確實希望如果用戶選擇選項：學生或學生，將有-10美元的折扣。

你可以問我為什么使用each function ？ 選項： other被選中，第一次頁面顯示價格110 $。 每個功能都解決了這個問題 我也有JS小提琴，你可以檢查一下。 抱歉我的英語。

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();

示例小提琴

Answer 2

嘗試這個：

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

DEMO在這里。