Правильный счетчик вопросов

128

27 июля 2019, 16:20

Имеется несколько input'ов с одинаковым классом
Как узнать какой инпут по счету сейчас активен?

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
                    <p class="maincontent__text">Вопрос <span class="maincontent__number">1</span> из 4</p> 
 
 
    <div class="interview__input-wrapper"> 
      <div class="interview__item"> 
        <div class="interview__item-text interview__text-main">Ваше имя?</div> 
        <input 
          type="text" 
          class="interview__input change__input" 
          placeholder="Моё имя.." 
          autofocus 
        /> 
      </div> 
      <div class="interview__item"> 
        <div class="interview__item-text interview__text-main">Сколько Вам?</div> 
        <input 
          type="text" 
          class="interview__input change__input" 
          placeholder="Мой возраст.." 
        /> 
      </div> 
      <div class="interview__item"> 
        <div class="interview__item-text interview__text-main">Какой стаж?</div> 
        <input 
          type="text" 
          class="interview__input change__input" 
          placeholder="Мой стаж.." 
        /> 
      </div> 
      <div class="interview__item"> 
        <div class="interview__item-text interview__text-main"> 
          Сильные стороны? 
        </div> 
        <input 
          type="text" 
          class="interview__input change__input" 
          placeholder="Мои сильные стороны.." 
        /> 
      </div> 
    </div>

я хочу сделать так чтобы счетчик считал правильно начиная с числа 1 и заканчивая последним input'ом с учетом того что их может быть больше или меньше чем в примере.

maincontent__number

Именно в этот спан я и хочу вставлять корректный номер.

Answer 1

$(".interview__input-wrapper input").focus(function(){ 
  var num = $(".interview__input-wrapper input").index(this) + 1; 
  $(".maincontent__number").text(num); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<p class="maincontent__text">Вопрос <span class="maincontent__number"></span> из 4</p> 
 
 
<div class="interview__input-wrapper"> 
  <div class="interview__item"> 
    <div class="interview__item-text interview__text-main">Ваше имя?</div> 
    <input type="text" class="interview__input change__input" placeholder="Моё имя.." autofocus /> 
  </div> 
  <div class="interview__item"> 
    <div class="interview__item-text interview__text-main">Сколько Вам?</div> 
    <input type="text" class="interview__input change__input" placeholder="Мой возраст.." /> 
  </div> 
  <div class="interview__item"> 
    <div class="interview__item-text interview__text-main">Какой стаж?</div> 
    <input type="text" class="interview__input change__input" placeholder="Мой стаж.." /> 
  </div> 
  <div class="interview__item"> 
    <div class="interview__item-text interview__text-main"> 
      Сильные стороны? 
    </div> 
    <input type="text" class="interview__input change__input" placeholder="Мои сильные стороны.." /> 
  </div> 
</div>