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

これはうまくいくと思います。オプション：選択を使用して、選択の値を取得することを確認してください。

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