JQuery - Показать/скрыть группу полей

Question

Я хочу показать или скрыть некоторые поля, используя значение select в качестве критериев. Я не хочу повторять, что снова забираю петлю, чтобы показать и скрыть поля. Я хочу использовать один и тот же код цикла для отображения или скрытия. Какой лучший подход?

hideFields = function() { 
    var fields = $(['#foo', '#bar', '#lorem', '#ipsum']) 
     showHide = function (action) { 
      if (action === 'show' || action === 'hide') { 
       action = action + '();'; 
       fields.each(function (index, value) { 
        $(value).parent() 
         .parent() 
         .action(); // call show||hide here... not working... 
       }); 
      } 
     }; 

    if ($('#select').val() === 'something') { 
     showHide('hide'); 
    } 
    else { 
     showHide('show'); 
    } 
}; 

hideFields(); 

Спасибо.

Answer 1

Вы можете использовать переключатель JQuery в() метод, чтобы показать и скрыть элементы:

$(".fields").toggle(); 

Таким образом, вам не придется беспокоиться о своем состоянии, и есть JQuery выяснить, если они должны быть скрыты или не.

Вы также можете передать в булево к методу, который будет показывать только или только скрыть элементы:

$(".fields").toggle(true); // Shows elements, equivalent to show() 
$(".fields").toggle(false); // Hides elements, equivalent to hide() 

И если вам нужно сделать некоторую дополнительную логику, вы всегда можете запросить CSS свойства элементов с помощью $(). css() и решить, что делать дальше.

Answer 2

var hideFields = function() { 
    var $fields = $('#foo, #bar, #lorem, #ipsum'); 
    $fields.toggle(!($('#select').val() === 'something')); 
}; 

hideFields(); 

Answer 3

Я думаю, что это сработает. Убедитесь, что вы используете опцию: выбрано для получения значения выбора.

function hideFields() { 
    var fields = '#foo, #bar, #lorem, #ipsum'; 
    if ($('#select option:selected').val() === 'something') { 
     $(fields).show(); 
    } else { 
     $(fields).hide(); 
    } 
} 
hideFields();