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();