如何实现当前div输入框填值后显示同class的下一个div？

Got it, let's fix this step by step. The core idea here is to only show the first question container initially, then reveal the next one whenever the current input has a valid value. Here's how to adjust your code to make this work seamlessly:

1. Fix HTML & Add Initial Styling #

First, your HTML had curly Chinese quotes (“”) which break CSS/JS selectors—replace those with straight English quotes. We'll also add basic CSS to hide all subsequent question rows by default:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
  /* Hide all rows except the first one on page load */
  .row:not(:first-child) {
    display: none;
  }
</style>
<div class="row">
  <div class="question col-md-12">
    <input type="text" name="basicinfo" placeholder="Enter your first value...">
  </div>
</div>
<div class="row">
  <div class="question col-md-12">
    <input type="text" name="basicinfo" placeholder="Next field...">
  </div>
</div>
<div class="row">
  <div class="question col-md-12">
    <input type="text" name="basicinfo" placeholder="Last field...">
  </div>
</div>

2. Update JavaScript Logic #

We'll keep your existing number formatting and empty/filled class logic, then add the critical code to reveal the next row. The key is using reliable DOM traversal to target the correct next container:

$(document).ready(function () {
  var input = $('.question').find('input[type=text],select');
  
  // Number formatting on keyup
  $(input).keyup(function (event) {
    // Skip arrow keys to avoid interrupting typing
    if (event.which >= 37 && event.which <= 40) return;
    
    // Format input with comma separators for numbers
    $(this).val(function (index, value) {
      return value.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    });

    // Reveal next row if input has a valid value
    var cleanValue = $(this).val().replace(/\D/g, "");
    if (cleanValue !== '') {
      $(this).closest('.row').next('.row').show();
    } else {
      // Optional: Hide all subsequent rows if current input is emptied
      $(this).closest('.row').nextAll('.row').hide();
    }
  });

  // Blur event to update empty/filled classes and confirm visibility
  $('input').blur(function () {
    var cleanValue = $(this).val().replace(/\D/g, "");
    if (cleanValue === '') {
      $(this).closest('.question').addClass('empty').removeClass('filled');
      // Optional: Hide next row if input is cleared
      $(this).closest('.row').next('.row').hide();
    } else {
      $(this).closest('.question').addClass('filled').removeClass('empty');
      // Ensure next row stays visible if input has value
      $(this).closest('.row').next('.row').show();
    }
  });
});

3. Key Details to Note #

• Reliable DOM Traversal: $(this).closest('.row') targets the nearest parent .row container—this is better than chaining .parent().parent() because it works even if your HTML structure changes slightly.
• Immediate Feedback: The keyup event triggers the reveal as soon as the user types a digit, making the interaction feel responsive.
• Optional Cleanup: The code includes logic to hide subsequent rows if the current input is emptied—you can remove those lines if you want to keep previously revealed rows visible.

内容的提问来源于stack exchange，提问作者Dzonikas