Добавить еще одно условие, чтобы показать/скрыть divs

Question

У меня есть следующий скрипт в форме.

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

В основном, в зависимости от значения выберите поле #bizloctype (значение = "1", "2", "3" или "4") соответствующие DIV шоу и остальные скрыты (DIV класс = «пакет-1», «пакет-2», «пакет-3» или «пакет-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/.