Question

我在表单上有以下脚本。

jQuery(document).ready(function($) {
    $('#bizloctype').on('change',function() {
        $('#packages div').show().not(".package-" + this.value).hide();
    });
});
</script>

基本上，取决于选择框#bizloctype的值（值=＆＃34; 1＆＃34;，＆＃34; 2＆＃34;，＆＃34; 3＆＃34;或＆＃ 34; 4＆＃34;）相应的div显示，其余的隐藏（div class =＆＃34; package-1＆＃34;，＆＃34; package-2＆＃34;，＆＃34; package-3＆＃ 34;，或者＆＃34; package-4＆＃34;）。完美的工作。

但是，我需要添加一个附加条件。我需要文本框#annualsales作为确定哪个div显示的另一个条件（如果值小于35000，则它应该仅显示package-1，而不显示其他包。

我认为以下脚本在独立于其他脚本时工作正常，但我需要了解如何将它们结合起来。

<script>
    $("#annualsales").change(function(){
        $(".package-1,.package-2,.package-3,.package-4").hide();
        var myValue = $(this).val();
        if(myValue  <= 35000){
           $(".package-1").show();
        }
        else 
        {
            $(".package-2").show();
        }
    });
</script>

请帮忙吗？

Answer 1

如果我理解你的问题，请尝试使用此代码。它首先向#annualsales添加一个onChange监听器，这是您最初拥有的代码。然后，对于#bizloctype的onChange侦听器，它只是在显示其他包之前检查#annualsales的值。

jQuery(document).ready(function($) {
    // Check value of #annualsales on change
    $("#annualsales").change(function(){
        $(".package-1,.package-2,.package-3,.package-4").hide();
        var myValue = $(this).val();
        if(myValue  <= 35000){
           $(".package-1").show();
        }

    // Only show other packages if value is > 35000
    $('#bizloctype').on('change',function() {
        $(".package-1,.package-2,.package-3,.package-4").hide();
        if ($('#annualsales').val() <= 35000) {
            $(".package-1").show();
        } else {
            $('#packages div').show().not(".package-" + this.value).hide();
        }
    });
});

Answer 2

我会从匿名函数中删除逻辑并执行以下操作：

// handle display
function displayPackage( fieldID ) {
    var packageType = getPackageType(fieldID);
    $('#packages div').show().not(".package-" + packageType).hide();
}

// getting the correct value (1,2,3 or 4)
function getPackageType( fieldID ) {
    // default displayed type
    var v = 1;
    switch(fieldID) {
        case 'bizloctype':
            // first check it annualsales is 1
            v = (getPackageType('annualsales') == 1) ? 
              1 :  $('#' + fieldID).val();
            break;
        case 'annualsales':
            v = (parseInt($('#' + fieldID).val(),10) <= 35000) ? 1 : 2;
            break;
    }       
    return v;
}

jQuery(document).ready(function($) {
    $('#bizloctype,#annualsales').on('change',function() {
       displayPackage($(this).attr('id'));
    }); 
});

Answer 3

由于您已经使用了JQuery，因此可以使用data()函数创建一个简单但动态的条件系统。例如，您可以使用所需条件注释每个元素，然后将change个侦听器附加到其他元素，以使条件处于活动状态或非活动状态。

例如，使用此HTML：

<div id="conditions">
    Condition 1: <input type="checkbox" id="check1" /> &lt;= check this<br/>
    Condition 2: <input type="checkbox" id="check2" /><br/>
    Condition 3: <input type="text" id="value1" /> &lt;= introduce 1001 or greater<br/>
    Condition 4: <input type="text" id="value2" /><br/>
</div>

<p id="thing" data-show-conditions="check1 value1-gt-1000" 
   style="display: none;">
    The thing to show.
</p>

这个Javascript：

function setShowCondition(el, condition, active) {
    var conditions = $(el).data('conditions') || {};
    conditions[condition] = active;
    $(el).data('conditions', conditions);

    var required = ($(el).data('show-conditions') || "").split(" ");
    var visible = required.every(function (c) {
        return conditions[c];
    });

    if (visible) {
        $(el).show();
    } else {
        $(el).hide();
    }
}

$("#conditions input[type='checkbox'").change(function () {
    setShowCondition('#thing',
                     $(this).attr('id'),
                     $(this).is(':checked'));
});

$("#value1").change(function () {
    var number = parseInt($(this).val());
    setShowCondition('#thing', 'value1-gt-1000', number > 1000);
});

您可以轻松维护条件，而无需嵌套和组合多个if语句。

我准备了一个样本，以便在https://jsfiddle.net/2L5brd80/中显示。

为显示/隐藏分区添加另一个条件

3 个答案: