Более эффективный способ скрытия/отображения четырех элементов на основе выбора

Question

В настоящее время я скрываю/скрываю определенные выпадающие списки, основанные на выборе пользователей. Для этого мне пришлось повторить много кода. Я не вижу более простого способа сделать это, но я не могу не чувствовать, что это очень раздуто для его потребностей.

DEMO http://jsfiddle.net/LstNS/40/

$('#NumOfchildren').change(function() { 
    var numOfChildren = $(this).val(); 
    if (numOfChildren == 0 || numOfChildren == 'child5plus') { 
     $("#child1").hide(); 
     $('select[name="child1"]>option:eq(0)').prop('selected', true); 
     $("#child2").hide(); 
     $('select[name="child2"]>option:eq(0)').prop('selected', true); 
     $("#child3").hide(); 
     $('select[name="child3"]>option:eq(0)').prop('selected', true); 
     $("#child4").hide(); 
     $('select[name="child4"]>option:eq(0)').prop('selected', true); 
     if (numOfChildren != 'child5plus') { 
      $("#child5plus").hide(); 
     } else { 
      $("#child5plus").show(); 
     } 
    } 
    if (numOfChildren > 0) { 
     $("#child1").show(); 
     $("#child2").hide(); 
     $('select[name="child2"]>option:eq(0)').prop('selected', true); 
     $("#child3").hide(); 
     $('select[name="child3"]>option:eq(0)').prop('selected', true); 
     $("#child4").hide(); 
     $('select[name="child4"]>option:eq(0)').prop('selected', true); 
     $("#child5plus").hide(); 
    } 
    if (numOfChildren > 1) { 
     $("#child1").show(); 
     $("#child2").show(); 
     $("#child3").hide(); 
     $('select[name="child3"]>option:eq(0)').prop('selected', true); 
     $("#child4").hide(); 
     $('select[name="child4"]>option:eq(0)').prop('selected', true); 
     $("#child5plus").hide(); 
    } 
    if (numOfChildren > 2) { 
     $("#child1").show(); 
     $("#child2").show(); 
     $("#child3").show(); 
     $("#child4").hide(); 
     $('select[name="child4"]>option:eq(0)').prop('selected', true); 
     $("#child5plus").hide(); 
    } 
    if (numOfChildren > 3) { 
     $("#child1").show(); 
     $("#child2").show(); 
     $("#child3").show(); 
     $("#child4").show(); 
     $("#child5plus").hide(); 
    } 
}); 

Answer 1

Вот моя попытка на него:

$('#NumOfchildren').change(function() { 
    var numOfChildren = $(this).val(); 
    $(".child-age").hide().find('select option:first').prop('selected', true); 
    if (numOfChildren === 'child5plus') { 
     $("#child5plus").show(); 
    } else if (numOfChildren) { 
     for (var i = 1; i <= numOfChildren; i++) { 
      $("#child" + i).show(); 
     } 
    } 
}); 

http://jsfiddle.net/csicky/LstNS/55/

Answer 2

Я дал ему стрелять, пытаясь минимизировать дублирование кода. Bascialy Я добавил атрибут для каждого дочернего номера (в теге div, в котором есть поле выбора, в котором пользователь вводит возраст ребенка). Затем используется для оценки того, какие элементы для отображения:

// Display child age select boxes matching users child amount 
$('.child-age').filter(function() { 
    return $(this).attr("data-childs") <= numOfChildren; 
}).show(); 

// Hide others and reset any age user has entered 
$('.child-age').filter(function() { 
    return $(this).attr("data-childs") > numOfChildren; 
}).hide().find('option:eq(0)').prop('selected', true); 

Полный JSFiddle

http://jsfiddle.net/LstNS/51/

Answer 3

Первый блок может быть значительно упрощенной следующим образом:

http://jsfiddle.net/isherwood/LstNS/49

if (numOfChildren == 0 || numOfChildren == 'child5plus') { 
    $('.child-age').hide().find('select > option:eq(0)').prop('selected', true); 

    if (numOfChildren == 'child5plus') { 
     $("#child5plus").show(); 
    } 
} 

Другие блоки могут быть реорганизованы по аналогии.

Answer 4

Вот один из способов устранения дублирования функциональности с помощью цикла, а затем извлекая его в отдельную функцию. Это хорошая отправная точка для вас. Я считаю, что все, что вам нужно сделать, чтобы закончить это, - это установить свойство «selected».

http://jsfiddle.net/LstNS/40/

$('#NumOfchildren').change(function() { 
    var numOfChildren = $(this).val(); 

    if (numOfChildren == 'child5plus') { 
     $("#child5plus").show();  
    } else { 
     showNumSelects(numOfChildren); 
    } 
}); 

var showNumSelects = function(numChildren){ 
    $('.child-age').hide(); 
    for(i = 0; i <= numChildren; i++){ 
     elemName = "#child" + i; 
     $(elemName).show(); 
    } 
}