jquery - 单击第一个输入后显示下一个输入（FORM）

Question

我得到了一个看起来像这样的表格：

仅当用户单击上一行中的输入时，我才想显示下一个输入行。为此，我编写了我的脚本，但它没有直接关注输入。因此，如果您在输入字段外稍稍单击，下一行仍会显示。

不幸的是，如果我只是将点击侦听器上的类更改为输入标签，它就不再工作了——就像它找不到下一行一样。

在我为每个元素硬编码类之前，有什么动态解决方案吗？

注意：（无法设置 codepen，因为它是一个 cms 并且不知道如何将所有合并的 css/js 和库导入到 codepen）

function revealNextRow() {
  $('.radio-toolbar').on('click', function() {
    $(this).next('.radio-toolbar').fadeIn();
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
HTML STRUCTURE for each input row

<form>
  <h3 class="text-center">HEADING </h3>
  <div class="radio-toolbar pb-4">
    <div class="row mt-4 mb-4">
      <div class="col-6 mb-1">
        <input type="radio" id="step1ja" name="step1" value="25" class="calc">
        <label for="step1ja" class="w-100">Ja</label>
      </div>
      <div class="col-6 mb-1">
        <input type="radio" id="step1nein" name="step1" value="0" class="calc">
        <label for="step1nein" class="w-100">Nein</label>
      </div>
    </div>
  </div>
  <div class="radio-toolbar mt-5 pb-4 hidden">
    <h3 class="text-center">Wie wohnen Sie?</h3>
    <div class="row mt-4 mb-4">
      <div class="col-sm-4 mb-1">
        ...
      </div>
    </div>
  </div>
</form>

标签： jqueryformsdynamic

Answer 1

您不需要该功能。您需要从一开始就拥有事件侦听器

$(function() { // on page load
  $('.radio-toolbar').on('click', 'input[type=radio]', function() {
    $(this).closest('.radio-toolbar').next().fadeIn();
  });
});

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<form>
  <h3 class="text-center">HEADING </h3>
  <div class="radio-toolbar pb-4">
    <div class="row mt-4 mb-4">
      <div class="col-6 mb-1">
        <input type="radio" id="step1ja" name="step1" value="25" class="calc">
        <label for="step1ja" class="w-100">Ja</label>
      </div>
      <div class="col-6 mb-1">
        <input type="radio" id="step1nein" name="step1" value="0" class="calc">
        <label for="step1nein" class="w-100">Nein</label>
      </div>
    </div>
  </div>
  <div class="radio-toolbar mt-5 pb-4 hidden">
    <h3 class="text-center">Wie wohnen Sie?</h3>
    <div class="row mt-4 mb-4">
      <div class="col-6 mb-1">
        <input type="radio" id="step1ja" name="step1" value="25" class="calc">
        <label for="step1ja" class="w-100">Irgenwo</label>
      </div>
      <div class="col-6 mb-1">
        <input type="radio" id="step1nein" name="step1" value="0" class="calc">
        <label for="step1nein" class="w-100">Nirgendwo</label>
      </div>
    </div>
  </div>
</form>