Отображение только одного диапазона за раз при нажатии на ближайший вход

Question

Я пытаюсь заставить работать следующее: т.е. когда вы нажимаете на каждый из входов, только диапазон строк формы становится активным для добавления класса.Кажется, что когда я нажимаю на любой вход, все диапазоны показывают, когда все, что я хочу, это отображать ближайший диапазон.

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

Мой код:

 var tooltip = $('.tooltips'),
        capacityInput = $('.capacity-form input'),
        capacityFormRow = $('.js-form-row');

    $(capacityFormRow).each(function(){
           $(capacityInput).click(function(){
           $(tooltip).show();
       });
    });

У меня включен кодСледующая ссылка: -

https://codepen.io/robbiemcmullen/pen/GYKPRR

Любая помощь будет оценена Спасибо

Answer 1

Поместите тег span с классом tooltips после тега ввода и используйте next()

   <div class="first-child js-qtip">
      <label>Event</label>
      <input type="number" />
      <span class="tooltips js-qtip">tooltip content</span>
      <p class="form__error-message js-qtip"></p>
    </div>

Вместо строки

 $(tooltip).show();

используйте

 $(this).next(tooltip).show();

Answer 2

Вам нужно использовать $(this) для нацеливания на выбранный в данный момент элемент:

$(this).siblings('.tooltips').addClass('active');

Вам также необходимо удалить класс active из всех всплывающих подсказок после каждого нажатия, используя:

tooltip.removeClass('active');

ПРИМЕЧАНИЕ: Вам не нужно зацикливаться, используя each, вы можете прикреплять события, используя только селектор.

var tooltip = $('.tooltips');

$('.capacity-form input').click(function() {
  tooltip.removeClass('active');
  $(this).siblings('.tooltips').addClass('active');
});

li {
  margin: 1em auto;
}

label {
  margin-right: 1em;
}

.tooltips {
  position: absolute;
  left: 550px;
  display: none;
  margin-top: -20px;
}

.active {
  display: block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="form-wrapper capacity-form js-qtip">
  <li class="js-form-row form__row container first-layer js-qtip">
    <div class="first-child js-qtip">
      <label class="form__label js-qtip" data-bind="text: 'Event: ' + event_capacity_label()">Event: Mornington Running Festival</label>
      <span class="tooltips js-qtip">
                            <b data-bind="text: event_participants_number" class="js-qtip">896</b>   Place(s) taken
                         </span>
      <input type="number" class="form__element                                       u-small form__element--input                                       form__element--number mod                                       js-capacity_number_input js-qtip" data-bind="value: event_capacity,
                                          valueUpdate: 'afterkeydown'" data_ui="event_capacity_mangement_event_capacity_field" min="0" max="999999" onkeypress="if(this.value.length>=6) { return false;}" oninput="if(this.value.length>=6) { this.value = this.value.slice(0,6); }">
      <p class="form__error-message js-qtip" data-bind="validationMessage: event_capacity" data_ui="event_capacity_mangement_error_message_event_capacity_field" style="display: none;"></p>
      <br class="js-qtip">
    </div>
    <ul class="js-form-row form__row">
      <li>
        <div class="second-child">
          <label class="form__label" data-bind="text: category_label() + ': ' + sub_event_name()">Entry Type: Half Marathon</label>
          <span class="tooltips">
                    <b data-bind="text: sub_event_participants_number">236</b> Place(s) taken

                </span>
          <input type="number" data_ui="event_capacity_mangement_sub_event_capacity_field" class="form__element
                          u-small form__element--input
                          form__element--number mod
                          js-capacity_number_input" data-bind="value: sub_event_capacity,
                              valueUpdate: 'afterkeydown',">
          <p class="form__error-message" data-bind="validationMessage: sub_event_capacity" data_ui="event_capacity_mangement_error_message_sub_event_capacity_field" style="display: none;"></p>
          <ul class="js-form-row form__row">
            <li>
              <div class="second-child">
                <label class="form__label" data-bind="text: category_label() + ': ' + sub_event_name()">Entry Category : Individual Adult</label>
                <span class="tooltips">
                    <b data-bind="text: sub_event_participants_number">236</b> Place(s) taken

                </span>
                <input type="number" data_ui="event_capacity_mangement_sub_event_capacity_field" class="form__element
                          u-small form__element--input
                          form__element--number mod
                          js-capacity_number_input" data-bind="value: sub_event_capacity,
                              valueUpdate: 'afterkeydown',">
                <p class="form__error-message" data-bind="validationMessage: sub_event_capacity" data_ui="event_capacity_mangement_error_message_sub_event_capacity_field" style="display: none;"></p>
              </div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <ul class="js-form-row form__row">
      <li>
        <div class="second-child">
          <label class="form__label" data-bind="text: category_label() + ': ' + sub_event_name()">Entry Type: 10km Fun Run</label>
          <span class="tooltips">
                    <b data-bind="text: sub_event_participants_number">332</b> Place(s) taken

                </span>
          <input type="number" data_ui="event_capacity_mangement_sub_event_capacity_field" class="form__element
                          u-small form__element--input
                          form__element--number mod
                          js-capacity_number_input" data-bind="value: sub_event_capacity,
                              valueUpdate: 'afterkeydown',">
          <p class="form__error-message" data-bind="validationMessage: sub_event_capacity" data_ui="event_capacity_mangement_error_message_sub_event_capacity_field" style="display: none;"></p>
          <ul class="js-form-row form__row">
            <li>
              <div class="second-child">
                <label class="form__label" data-bind="text: category_label() + ': ' + sub_event_name()">Entry Category : Individual Adult</label>
                <span class="tooltips">
                    <b data-bind="text: sub_event_participants_number">323</b> Place(s) taken

                </span>
                <input type="number" data_ui="event_capacity_mangement_sub_event_capacity_field" class="form__element
                          u-small form__element--input
                          form__element--number mod
                          js-capacity_number_input" data-bind="value: sub_event_capacity,
                              valueUpdate: 'afterkeydown',">
                <p class="form__error-message" data-bind="validationMessage: sub_event_capacity" data_ui="event_capacity_mangement_error_message_sub_event_capacity_field" style="display: none;"></p>
                <!-- ko if: children().length > 0 -->
                <!-- /ko -->
              </div>
            </li>
          </ul>
          <ul class="js-form-row form__row">
            <li>
              <div class="second-child">
                <label class="form__label" data-bind="text: category_label() + ': ' + sub_event_name()">Entry Category : Individual Child</label>
                <span class="tooltips">
                    <b data-bind="text: sub_event_participants_number">9</b> Place(s) taken

                </span>
                <input type="number" data_ui="event_capacity_mangement_sub_event_capacity_field" class="form__element
                          u-small form__element--input
                          form__element--number mod
                          js-capacity_number_input" data-bind="value: sub_event_capacity,
                              valueUpdate: 'afterkeydown',">
                <p class="form__error-message" data-bind="validationMessage: sub_event_capacity" data_ui="event_capacity_mangement_error_message_sub_event_capacity_field" style="display: none;"></p>
              </div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <ul class="js-form-row form__row">
      <li>
        <div class="second-child">
          <label class="form__label" data-bind="text: category_label() + ': ' + sub_event_name()">Entry Type: 5km Fun run</label>
          <span class="tooltips">
                    <b data-bind="text: sub_event_participants_number">269</b> Place(s) taken

                </span>
          <input type="number" data_ui="event_capacity_mangement_sub_event_capacity_field" class="form__element
                          u-small form__element--input
                          form__element--number mod
                          js-capacity_number_input" data-bind="value: sub_event_capacity,
                              valueUpdate: 'afterkeydown',">
          <p class="form__error-message" data-bind="validationMessage: sub_event_capacity" data_ui="event_capacity_mangement_error_message_sub_event_capacity_field" style="display: none;"></p>
          <ul class="js-form-row form__row">
            <li>
              <div class="second-child">
                <label class="form__label" data-bind="text: category_label() + ': ' + sub_event_name()">Entry Category : Individual Adult</label>
                <span class="tooltips">
                    <b data-bind="text: sub_event_participants_number">207</b> Place(s) taken

                </span>
                <input type="number" data_ui="event_capacity_mangement_sub_event_capacity_field" class="form__element
                          u-small form__element--input
                          form__element--number mod
                          js-capacity_number_input" data-bind="value: sub_event_capacity,
                              valueUpdate: 'afterkeydown',">
                <p class="form__error-message" data-bind="validationMessage: sub_event_capacity" data_ui="event_capacity_mangement_error_message_sub_event_capacity_field" style="display: none;"></p>
              </div>
            </li>
          </ul>
          <ul class="js-form-row form__row">
            <li>
              <div class="second-child">
                <label class="form__label" data-bind="text: category_label() + ': ' + sub_event_name()">Entry Category : Individual Child</label>
                <span class="tooltips">
                    <b data-bind="text: sub_event_participants_number">62</b> Place(s) taken

                </span>
                <input type="number" data_ui="event_capacity_mangement_sub_event_capacity_field" class="form__element
                          u-small form__element--input
                          form__element--number mod
                          js-capacity_number_input" data-bind="value: sub_event_capacity,
                              valueUpdate: 'afterkeydown',">
                <p class="form__error-message" data-bind="validationMessage: sub_event_capacity" data_ui="event_capacity_mangement_error_message_sub_event_capacity_field" style="display: none;"></p>
              </div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <ul class="js-form-row form__row">
      <li>
        <div class="second-child">
          <label class="form__label" data-bind="text: category_label() + ': ' + sub_event_name()">Entry Type: 1km Kids Race</label>
          <span class="tooltips">
                    <b data-bind="text: sub_event_participants_number">59</b> Place(s) taken

                </span>
          <input type="number" data_ui="event_capacity_mangement_sub_event_capacity_field" class="form__element
                          u-small form__element--input
                          form__element--number mod
                          js-capacity_number_input" data-bind="value: sub_event_capacity,
                              valueUpdate: 'afterkeydown',">
          <p class="form__error-message" data-bind="validationMessage: sub_event_capacity" data_ui="event_capacity_mangement_error_message_sub_event_capacity_field" style="display: none;"></p>
          <ul class="js-form-row form__row">
            <li>
              <div class="second-child">
                <label class="form__label" data-bind="text: category_label() + ': ' + sub_event_name()">Entry Category : Child Only</label>
                <span class="tooltips">
                    <b data-bind="text: sub_event_participants_number">59</b> Place(s) taken

                </span>
                <input type="number" data_ui="event_capacity_mangement_sub_event_capacity_field" class="form__element
                          u-small form__element--input
                          form__element--number mod
                          js-capacity_number_input" data-bind="value: sub_event_capacity,
                              valueUpdate: 'afterkeydown',">
                <p class="form__error-message" data-bind="validationMessage: sub_event_capacity" data_ui="event_capacity_mangement_error_message_sub_event_capacity_field" style="display: none;"></p>
              </div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </li>
</ul>