添加另一个条件以显示/隐藏Div

Question

我在表单上有下面的脚本。

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

基本上，取决于复选框#bizloctype (value="1“、"2”、"3“或"4")的值，相应的div显示，其余的将被隐藏(div class="package-1”、“Packe-2”、“Packe-3”或“Packe-4”)。效果很好。

但是，我需要增加一个附加条件。我需要文本框#annualsales作为确定哪个div显示的另一个条件(如果值小于35000，它应该只显示包-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

我将从匿名函数中删除逻辑，并执行如下操作：

// 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 2

如果我正确地理解了你的问题，那就试试这段代码。它首先将一个onChange侦听器添加到#annualsales，这是您最初拥有的代码。然后，对于用于onChange的#bizloctype侦听器，它只需在显示其他包之前检查#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 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/中显示这一点。