更改基於收音機與同一父母的輸入值

Question

我有一個網絡表單，我想根據相應的單選按鈕選擇更改文本輸入的值。我不想使用每個文本輸入和單選按鈕的ID，我想遵循一個簡單的模式，其中文本輸入基於共享（非直接）父字段集的單選按鈕上的值。

有多種方法可以實現這一點，但我的策略是查找單選按鈕的最近的父級字段集（也是文本輸入的父級字段集），搜索正確的文本輸入並更改文本輸入的值。

這裏是我到目前爲止，但它不工作：

jQuery('.big-container input[id$="-selector-1"]').change(function() { 
    var parent = jQuery('.smaller-container input[id$="-selector-1"]').closest('fieldset'); 
    jQuery('parent').find('.fieldset-wrapper div:nth-child(2) input').val('1'); 
}); 
jQuery('.big-container input[id$="-selector-2"]').change(function() { 
    var parent = jQuery('.smaller-container input[id$="-selector-2"]').closest('fieldset'); 
    jQuery('parent').find('.fieldset-wrapper div:nth-child(2) input').val('0'); 
}); 

HTML：

<fieldset class="big-wrapper"> 
    <div class="fieldset-wrapper"> 
     <fieldset class="medium-wrapper-1"> 
      <div class="fieldset-wrapper"> 
       <div>...</div> <!-- unimportant --> 
       <fieldset class="smaller-container-1"> 
        <div class="fieldset-wrapper"> 
         <div> 
          <label>...</label> 
          <div class="form-radios"> 
           <div class="radio-1-wrapper"> 
            <div class="input-label-wrapper"> 
             <input id="blahblahblah-selector-1">...</input> 
             <label>...</label> 
            </div> 
           </div> 
           <div class="radio-2-wrapper"> 
            <div class="input-label-wrapper"> 
             <input id="blahblahblah-selector-2">...</input> 
             <label>...</label> 
            </div> 
           </div> 
          </div> 
         </div> 
         <div class="text-input-X"> 
          <label>...</label> 
          <input>...</input> 
         </div> 
         <div class="text-input-Y">...</div> <!-- parallel to .text-input-X --> 
         <div class="text-input-Z">...</div> <!-- parallel to .text-input-X --> 
        </div> 
       </fieldset>    
       <fieldset class="smaller-container-2">...</fieldset> <!-- parallel to .smaller-container-1 --> 
       <fieldset class="smaller-container-3">...</fieldset> <!-- parallel to .smaller-container-1 --> 
       <fieldset class="smaller-container-4">...</fieldset> <!-- parallel to .smaller-container-1 -->   
      </div> 
      </fieldset>     
     <fieldset class="medium-wrapper-2">...</fieldset> <!-- parallel to .medium-wrapper-1 -->  
    </div>     
</fieldset> 

如果它是不明確的，input[id$="-selector-1"]和input[id$="-selector-2"]是單選按鈕，並div.text-input-X內的常規輸入是我想要更改的那個。

我在做什麼錯？

Answer 1

讓我們一步一步地做出改變，以簡化並希望澄清代碼以實現您的目標。

1：您使用jQuery，但我將使用速記$ - 除非你有一個很好的理由（即擔心衝突），這將提高可讀性。

$('.big-container input[id$="-selector-1"]').change(function() { 
    var parent = $('.smaller-container input[id$="-selector-1"]').closest('fieldset'); 
    $('parent').find('.fieldset-wrapper div:nth-child(2) input').val('1'); 
}); 

2：修正不正確的父參考（如上面在評論中提及）。

$('.big-container input[id$="-selector-1"]').change(function() { 
    var parent = $('.smaller-container input[id$="-selector-1"]').closest('fieldset'); 
    parent.find('.fieldset-wrapper div:nth-child(2) input').val('1'); 
}); 

3：下，而不是爲每個輸入要素創建多個綁定，我們將創建一個代表結合到最近的共同的父這可在DOM準備 - 在這種情況下，這就是.big-wrapper容器。我還將選擇器從$-selector-1更新爲更通用的*-selector-以捕獲所有單選按鈕。您可以閱讀更多關於在.on()documentation中使用委派的優點。

$('.big-wrapper').on('change', 'input[id*="-selector-"]', function() { 
    var parent = $('.smaller-container input[id$="-selector-1"]').closest('fieldset'); 
    $parent.find('.fieldset-wrapper div:nth-child(2) input').val('1'); 
}); 

5：使用更清晰的變量名（例如：$fieldset代替parent）可以幫助你爲你操縱的jQuery元素。另外請注意，我們能夠以更簡單的方式獲取目標文本輸入字段。注意：我喜歡在變量前加一個'$'符號來表示它是一個jQuery元素/集合。

$('.big-wrapper').on('change', 'input[id*="-selector-"]', function() { 

    var $radio = $(this), 
     $fieldset = $radio.closest('fieldset'), 
     $input = $fieldset.find(".text-input-X input"), 
     value = $radio.prop('id'); // <-- just as an example instead of the '1' 

    $input.val(value); 
}); 

演示：JSFiddle

我希望有足夠的在這裏，以幫助您在正確的軌道上。祝你好運。

---

更新：

如果你可以更新標記，你可以設置無線輸入的value屬性，並用它來文本字段的值設置爲$radio.val()

演示：JSFiddle