javascript - 在 jQuery 切换方法中保存以前的值

Question

我有一个表单，用户可以在其中选择职位广告的类型和他希望刊登广告的地点。工作广告价格根据工作机会的类型和地点数量而变化。

一切正常，但缺少一件事或不工作，例如有一个带有 FULLPACK 值的复选框，基本上如果用户选择它，它会收到一个新价格(折扣) ，但是当我切换出用户未选择此选项的情况时，我需要将价格更新为之前的价格数字，但无法找到最佳方法。

我的代码:

var adType;
var totalprice = 0.0;
var location;
var countLocations =1;

//hide step 2 div
$('#step2').hide();
$('#totalprice').html(totalprice);
$('.adType').change(function () {
    //after select one show next step
    $('#step2').show('slow');
    adType = $(this).val();
    //var checked = $("#isAgeSelected").is(':checked').val();   
    console.log(adType);
    switch(adType) {
        case "platinum":
            totalprice = 250.00;
            $('#totalprice').html(totalprice*countLocations)
            break;
        case "gold":
             totalprice = 125.00;
             $('#totalprice').html(totalprice*countLocations)
            break;
        case "silver":
             totalprice = 50.00;
             $('#totalprice').html(totalprice*countLocations)
            break;        
        default:
            totalprice = 0.00;
            $('#totalprice').html(totalprice*countLocations)
    }
});

$('.location').change(function () {
    location = $(this).val();
    countLocations = $('[name="countrylocation[]"]:checked').length;
    $('#totalprice').html(totalprice*countLocations);
    console.log(countLocations);
    if (location == 'FULLPACK') {
        $( "#allPackage" ).toggle(function() {
             $('#totalprice').html("new Price!")
        });     
    }
});

HTML:

<input class="adType" name="adType" type="radio" value="platinum">
<input class="adType" name="adType" type="radio" value="gold">
<input class="adType" name="adType" type="radio" value="silver"> 

<div class="col-md-12" id="step2">
    <h3>Step 2</h3>
    <div id="allPackage">
        <label class="checkbox"><input checked class="location" name=
        "countrylocation[]" type="checkbox" value="UK"> UK
        (default)</label> <label class="checkbox"><input class="location"
        name="countrylocation[]" type="checkbox" value="SP"> Spain</label>
        <label class="checkbox"><input class="location" name=
        "countrylocation[]" type="checkbox" value="IT"> Italy</label>
    </div><label class="checkbox"><input class="location" name=
    "countrylocation[]" type="checkbox" value="FULLPACK"> Full Language
    Package</label>
</div>
<div class="col-md-9">
    <p>Price: <span id="totalprice"></span> EUR</p>
</div>

Answer 1

你应该检查 "FULLPACK" 是否真的 :checked

使用 .toggle()(在您的代码中):

$('.location').change(function () {
    location = $(this).val();
    countLocations = $('[name="countrylocation[]"]:checked').length;
    if (location == 'FULLPACK'){
        var checked = $(this).is(':checked');
        return $( "#allPackage" ).toggle(function(){
             $('#totalprice').html(checked ? "new Price!" : (totalprice*countLocations));
        });
    }
    $('#totalprice').html(totalprice*countLocations);
});

JSFiddle demo

---

或者使用 .slideUp() 和 .slideDown():

$('.location').change(function () {
    location = $(this).val();
    countLocations = $('[name="countrylocation[]"]:checked').length;
    if (location == 'FULLPACK' && $(this).is(':checked')) {
        return $( "#allPackage" ).slideUp(function(){
             $('#totalprice').html("new Price!");
        });
    }else if (location == 'FULLPACK'){
        return $( "#allPackage" ).slideDown(function(){
            $('#totalprice').html(totalprice*countLocations);
        });
    }
    $('#totalprice').html(totalprice*countLocations);
});

JSFiddle demo