Question

我正在尝试使以下各项起作用，即，当您单击每个输入时，仅表单行跨度会激活添加类。似乎当我单击任何输入时，所有跨度都会显示，而我想要做的就是显示最近的跨度。

我也尝试了最接近的方法，但是我的代码如下：

我的代码：

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

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

我在以下链接上有一个Codepen：-

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

任何帮助将不胜感激谢谢

Answer 1

您需要使用$(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>

Answer 2

将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();

单击最近的输入一次仅显示一个跨度

2 个答案: