javascript - 使用 jQuery 在有效数据上显示提交按钮

Question

一旦输入中包含有效文本，我需要显示.nexto按钮。每个字段都有自己的按钮，因此当我获得有效的输入值时，与该字段关联的按钮应该显示，而其他输入字段按钮应该隐藏。谢谢。

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

您查找.nexto元素的方式是错误的。从事件处理程序内的 this 对象中，找到最接近的 .typeform-element，然后找到 .nexto 子对象。

此外，您还需要在开始时隐藏所有 .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>