Как добавить класс к набору полей пра-пра-пра-прародителя элемента, используя jquery? - PullRequest
Новая
       13

Как добавить класс к набору полей пра-пра-пра-прародителя элемента, используя jquery?

0 голосов
/ 05 сентября 2018

Я пытаюсь добавить класс к пра-пра-пра-прародителю элемента ввода с использованием jquery и / или простого javascript. Идея есть; после нажатия кнопки (class = "ws-btn-previous") на текущем шаге класс добавляется в набор полей, содержащий переключатель с выбранной емкостью на предыдущем шаге, и исчезает в этом наборе полей, а затем удаляет добавленный класс.

HTML для активного набора полей выглядит следующим образом: 

<fieldset class="working_status ">
  <h4 class="text-center">What is your Phone's condition?</h4>
  <div class="container">
    <div>
      <ul class="h-ws row">
        <li class="wsbf">
          <input type="radio" class="sell-rdb" id="ws1" name="working_status" value="Excellent" />
          <label class="ws-btn-labels" for="ws1">
            <p id="wslbl">Excellent</p>
            <p>Good as new. Has no dents or scratches.</p>
          </label>
        </li>
      </ul>
    </div>
  </div>
  <div class="container wizard-buttons">
    <button type="button" class="btn btn-previous ws-btn-previous">Previous</button>
    <button type="button" class="btn btn-next">Next</button>
  </div>
</fieldset>

HTML-раздел предыдущего набора полей на предыдущем шаге выглядит следующим образом: 

<fieldset class="capacity-gj7p">
  <h4 class="text-center">Please select your Galaxy J7 Prime memory capacity</h4>
  <div class="container">
    <div>
      <ul class="h-m row">
        <li class="cbf">
          <input type="radio" class="sell-rdb" id="sc49" name="capacity" value="32" />
          <label class="capacity-btn-labels" for="sc49">32</label>
        </li>
      </ul>
    </div>
  </div>
  <div class="container wizard-buttons">
    <button type="button" class="btn btn-previous sc-btn-previous">Previous</button>
    <button type="button" class="btn btn-next capacity-btn-next">Next</button>
  </div>
</fieldset>

Моя попытка решить проблему с помощью jQuery и простого javascript заключается в следующем: 

jQuery(document).ready(function() {
  $('form .ws-btn-previous').on('click', function() {
    var fset = document.getElementById("sell-wiz").elements["capacity"];

    $(this).parents('fieldset').fadeOut(200, function() {
      fset.addClass('capacity-parent');
      $('.capacity-parent').fadeIn();
      fset.removeClass('capacity-parent');
    });
  });
});

Что мне не хватает? Есть ли лучший способ сделать это? Заранее спасибо.

...