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

我认为这会奏效。确保你使用选项：selected来获得选择的值。

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