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