JQuery - 필드 그룹 표시/숨기기

Question

기준으로 선택 값을 사용하여 일부 필드를 표시하거나 숨기려고합니다. 필드를 숨기고 표시하기 위해 반복문을 다시 인쇄하는 것을 반복하고 싶지 않습니다. 표시 또는 숨기기 위해 동일한 루프 코드를 사용하고 싶습니다. 최선의 접근 방식은 무엇입니까?

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

나는 이것이 효과가 있다고 생각한다. select : selected를 사용하여 select 값을 가져와야합니다.

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