Jquery再利用可能なフォームトグル

Question

追加のフィールドを切り替えることができる複数のドロップダウン選択を持つフォームを作成しようとしています。

ドロップダウン1に「トグル」が選択されている場合は、「トグルフィールド1」が表示され、ドロップダウン2で同じことが欲しいだけです。私はコードにthisを追加してセレクタを制限しようとしました。

 $('.dropdownToggle').change(function() { 
 
      selection = $(this).val(); 
 
      switch (selection) { 
 
      case 'toggle': 
 
       $('div.toggle').show(); 
 
       break; 
 
      default: 
 
       $('div.toggle').hide(); 
 
       break; 
 
      } 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <label>Dropdown 1</label> 
 
    <select class="dropdownToggle" style="width: 67%;"> 
 
      <option value="something">Something</option> 
 
      <option value="toggle">Toggle</option> 
 
      </select> 
 
    <div class="toggle" style="display: none;"> 
 
    <label>toggled field 1</label> 
 
    <input type="text" placeholder="" style="width: 67%;"> 
 
    </div> 
 
</div> 
 

 
<div> 
 
    <label>Dropdown 2</label> 
 
    <select class="dropdownToggle" style="width: 67%;"> 
 
      <option value="something">Something</option> 
 
      <option value="toggle">Toggle</option> 
 
      </select> 
 
    <div class="toggle" style="display: none;"> 
 
    <label>toggled field 2</label> 
 
    <input type="text" placeholder="" style="width: 67%;"> 
 
    </div> 
 
</div>

Answer 1

使用siblings：必要に応じてセレクタによってフィルタリングマッチした要素の集合内の各要素の兄弟を取得します。

$(this).siblings(".toggle").show();

 $('.dropdownToggle').change(function() { 
 
      selection = $(this).val(); 
 
      switch (selection) { 
 
      case 'toggle': 
 
      $(this).siblings(".toggle").show(); 
 
       break; 
 
      default: 
 
       $(this).siblings(".toggle").hide(); 
 
       break; 
 
      } 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <label>Dropdown 1</label> 
 
    <select class="dropdownToggle" style="width: 67%;"> 
 
      <option value="something">Something</option> 
 
      <option value="toggle">Toggle</option> 
 
      </select> 
 
    <div class="toggle" style="display: none;"> 
 
    <label>toggled field 1</label> 
 
    <input type="text" placeholder="" style="width: 67%;"> 
 
    </div> 
 
</div> 
 

 
<div> 
 
    <label>Dropdown 2</label> 
 
    <select class="dropdownToggle" style="width: 67%;"> 
 
      <option value="something">Something</option> 
 
      <option value="toggle">Toggle</option> 
 
      </select> 
 
    <div class="toggle" style="display: none;"> 
 
    <label>toggled field 2</label> 
 
    <input type="text" placeholder="" style="width: 67%;"> 
 
    </div> 
 
</div>