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

您应该检查＆＃34; FULLPACK＆＃34; 是否实际为: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

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

1 个答案: