Question

当当前div中的输入填充值时，如何显示具有相同类的下一个div？我一直在尝试使用.parent和我能想到的一切，但似乎无法得到它应该如何工作的逻辑说实话，我甚至找不到开始的方式

我有很多div填充了输入，填充输入字段下一个div应该出现输入

＆＃13;

$(document).ready(function () {
  var input = $('.active-q').find('input[type=text],select');
  $(input).keyup(function (event) {

  // skip for arrow keys
  if (event.which >= 37 && event.which <= 40) return;
    // format number
    $(this).val(function (index, value) {
      return value.replace(/\D/g, "")
                  .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    });
  });

  ///animation
  // $(".active-q").each(function(i){
  //  $(this).delay(i*1000).animate({'marginLeft':0}, {duration: 500})
  // });
  $('input').blur(function () {
    tmpval = $(this).val();
    if (tmpval == '') {
      $(this).closest('.active-q').addClass('empty');
      $(this).closest('.active-q').removeClass('filled');
    } else {
      $(this).closest('.active-q').addClass('filled');
      $(this).closest('.active-q').removeClass('empty');
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=“row”>
  <div class=“question col-md-12>
    <input type=“text” name =“basicinfo”>
  </div>
</div>
<div class=“row”>
  <div class=“question col-md-12>
    <input type=“text” name =“basicinfo”>
  </div>
</div>
<div class=“row”>
  <div class=“question col-md-12>
    <input type=“text” name =“basicinfo”>
  </div>
</div>

＆＃13;

Answer 1

您需要以下内容：

//element is your input element that has just been filled or blurred
//Since your inputs are decendants of the divs with class "row",
//Go up the nodes to the ancestor with class "row"
//Then get it's sibling, the next div with class "row"
//Then get it's child div and add class active-q and remove class empty
function showNextQuestionDiv(element){
    const $currentInput = $(element);
    const $ancestorRowDiv = $currentInput.closest('div.row');
    const $nextRowDiv = $ancestorRowDiv.next('div.row');
    const $nextQuestionDiv = $nextRowDiv.find('div.question');

    if($nextQuestionDiv.hasClass('active-q') === false){

        $nextQuestionDiv.removeClass('empty');
        $nextQuestionDiv.addClass('active-q');
    }

}

填写输入后显示下一个div

1 个答案: