Показать кнопку отправки на действительные данные, используя jQuery

Question

Мне нужно показать кнопку .nexto, когда у меня есть действительный текст в input. У каждого поля есть своя собственная кнопка, поэтому дело в том, что когда я получаю правильное значение ввода, должна отображаться кнопка, связанная с полем, и кнопки других полей ввода должны скрываться. Спасибо.

var required = $('input[required]');
required.on('keyup', function(event) {
  if (this.value !== "") {
    $(this).$('.nexto').show();
  } else {
    $(this).$('.nexto').hide();
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="typeform-element" id="fname">
  <p><span class="list">1</span>&#8594;What's your First Name? *</p>
  <div class="input-element">
    <input type="text" name="fname" placeholder="Type your answer..." required class="ip-element">
    <p class="blinker">|</p>
  </div>
  <div class="ok-btn">
    <a href="#lname" class="nexto">OK &#10004;</a>
  </div>
</div>
<div class="typeform-element" id="lname">
  <p><span class="list">2</span>&#8594;What's Your Last Name? *</p>
  <div class="input-element">
    <input type="text" name="lname" placeholder="Type your answer..." required class="ip-element">
    <p class="blinker">|</p>
  </div>
  <div class="ok-btn">
    <a href="#email" class="nexto">OK &#10004;</a>
  </div>
</div>

Answer 1

Чтобы сделать это, вам нужно использовать jQuery методы обхода DOM, чтобы найти .nexto, относящийся к input, вызвавшему событие.

В качестве такового вы можете использовать комбинацию closest(), next() и find(). Также обратите внимание, что вы должны использовать CSS, чтобы скрыть эти элементы по умолчанию. Кроме того, я бы предложил использовать событие input вместо keyup, поскольку оно также работает для событий вставки, запускаемых мышью. Попробуйте это:

var $required = $('input[required]');

$required.on('input', function(event) {
  $(this).closest('.input-element').next('.ok-btn').find('.nexto').toggle(this.value !== "");
})

.ok-btn .nexto { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="typeform-element" id="fname">
  <p><span class="list">1</span>&#8594;What's your First Name? *</p>
  <div class="input-element">
    <input type="text" name="fname" placeholder="Type your answer..." required class="ip-element">
    <p class="blinker">|</p>
  </div>
  <div class="ok-btn">
    <a href="#lname" class="nexto">OK &#10004;</a>
  </div>
</div>
<div class="typeform-element" id="lname">
  <p><span class="list">2</span>&#8594;What's Your Last Name? *</p>
  <div class="input-element">
    <input type="text" name="lname" placeholder="Type your answer..." required class="ip-element">
    <p class="blinker">|</p>
  </div>
  <div class="ok-btn">
    <a href="#email" class="nexto">OK &#10004;</a>
  </div>
</div>

Answer 2

То, как вы находите элемент .nexto, неверно. Из this объекта внутри обработчика событий найдите ближайший .typeform-element, а затем найдите .nexto child.

Также вам нужно скрыть все .nexto при запуске.

$('.nexto').hide()

var required = $('input[required]');
required.on('keyup', function (event) {
    var nexto = $(this).closest('.typeform-element').find('.nexto')
    if (this.value !== "") {
        nexto.show();
    } else {
        nexto.hide();
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="typeform-element" id="fname">
    <p><span class="list">1</span>&#8594;What's your First Name? *</p>
    <div class="input-element">
        <input type="text" name="fname" placeholder="Type your answer..." required class="ip-element">
        <p class="blinker">|</p>
    </div>
    <div class="ok-btn">
        <a href="#lname" class="nexto">OK &#10004;</a>
    </div>
</div>

<div class="typeform-element" id="lname">
    <p><span class="list">2</span>&#8594;What's Your Last Name? *</p>
    <div class="input-element">
        <input type="text" name="lname" placeholder="Type your answer..." required class="ip-element">
        <p class="blinker">|</p>
    </div>
    <div class="ok-btn">
        <a href="#email" class="nexto">OK &#10004;</a>
    </div>
</div>