Изменить значение ввода на основе радио с одним и тем же родителем

Question

У меня есть веб-форма, где я хочу изменить значение текстового ввода на основе соответствующего выбора переключателя. Вместо того, чтобы использовать идентификаторы каждого текстового ввода и переключателя, я хочу следовать простому шаблону, в котором текстовые входы основывают свое значение на переключателях, которые совместно используют (не немедленный) родительский набор полей.

Существует не один способ выполнить это, но моя стратегия состояла в том, чтобы найти ближайший родительский набор радиокнопки (тот, который также является родителем для ввода текста), найти его для правильного ввода текста и изменить его значение текстового ввода.

Вот то, что я до сих пор, но он не работает:

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: Далее, вместо того чтобы создавать несколько привязок для каждого входного элемента, мы создадим один делегат привязку к ближайшему общему родителю, которая доступна на дом готовы - в этом случае, это .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

Я надеюсь, что есть достаточно здесь, чтобы помочь вам получить на правильном пути. Удачи.

---

Update:

Если вы можете обновить разметку, вы можете установить атрибут ввода радио value и использовать его, чтобы установить значение текстового поля $radio.val()

Демонстрация:JSFiddle