Question

我正在使用jQuery创建一个多步骤表单，并且试图仅在活动类不在第一个孩子上时显示#prev按钮。默认情况下，我已将display:none添加到#prev以便在加载时将其隐藏，但是当.active类添加到其他部分时，我很难显示它。

在使用is(":not(:first-child))的if语句中定位此对象时，它可以工作，但仅在将活动类添加到#step3上时显示。

有人能告诉我如何确保仅当.active以外的每个部分都使用#step1类时按钮才可见吗？

if(active.is(":not(:first-child)")) {
    $('#prev').show();
  }

HTML

<div class="multi-step-wrapper" id="multi-step">
            <div id="progressbar">
                <span></span>
            </div>
            <div class="steps-inner">
                <div class="multi-step-section active" id="step1"></div>
                <div class="multi-step-section" id="step2"></div>
                <div class="multi-step-section" id="step3"></div>
                <div class="multi-step-section" id="step4"></div>
                <div class="multi-step-section" id="step5"></div>
                <div class="multi-step-section" id="step6"></div>
                <div class="multi-form-actions">
                    <button id="prev" type="button">Back</button>
                    <button id="next" type="button">Next</button>
                </div>
            </div>
        </div>

CSS

#prev {
  display: none;
}

jQuery

$('.multi-form-actions button').on('click', function() {

  var el = $(this).attr('id');
  var active = $('.multi-step-section.active');

  if(active.is(":not(:first-child)")) {
    $('#prev').show();
  }

  active.removeClass('active');

  if(el == 'prev') {
      active.prev('.multi-step-section').addClass('active');
  }
  else if(el = 'next') {
      active.next('.multi-step-section').addClass('active');
  }

});

Answer 1

要完成这项工作，您需要做一些事情：

隐藏所有未激活的步骤（我假设您已经在执行此操作，因此为了简化示例代码而将其省略）
~~从所有同级步骤容器中删除活动状态~~ 实际上，这不是必需的，对我而言是一个谬论
相应地通过下一步/上一步更新active变量集合中保存的元素
之后移动按钮状态检查
在活动步骤为第一个步骤时隐藏按钮

当所有步骤都通过后，您还必须处理该情况，但这不在此问题的范围内。

我还简化了代码以消除冗余。

$('.multi-form-actions button').on('click', function() {
  var el = $(this).attr('id');
  var active = $('.multi-step-section.active');

  // also remove active class from siblings
  active.removeClass('active');

  if(el === 'prev' || el === 'next') { // in case you have any other buttons
    active = active[el]('.multi-step-section').addClass('active');;
  }
  
  // show or hide prev button depending on condition
  $('#prev')[active.is(":not(:first-child)") ? 'show' : 'hide']();
});

#prev,
.multi-step-section {
  display: none;
}

.multi-step-section.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  	
<div class="multi-step-wrapper" id="multi-step">
  <div id="progressbar">
    <span></span>
  </div>
  <div class="steps-inner">
    <div class="multi-step-section active" id="step1">step1</div>
    <div class="multi-step-section" id="step2">step2</div>
    <div class="multi-step-section" id="step3">step3</div>
    <div class="multi-step-section" id="step4">step4</div>
    <div class="multi-step-section" id="step5">step5</div>
    <div class="multi-step-section" id="step6">step6</div>
    <div class="multi-form-actions">
      <button id="prev" type="button">Back</button>
      <button id="next" type="button">Next</button>
    </div>
  </div>
</div>

Answer 2

尝试类似的方法，这样也可以确保有一个下一步可以激活。

$('.multi-form-actions button').on('click', function() {

  var el = $(this).attr('id');
  var active = $('.multi-step-section.active');
  var nextActive; 

  if(el == 'prev') {
    nextActive = active.prev('.multi-step-section');
  }
  else if(el = 'next') {
    nextActive = active.next('.multi-step-section');
  }

  if (nextActive.length > 0) {
    active.removeClass('active');

    if(nextActive.is(":first-child")) {
      $('#prev').hide();
    }
    else {
      $('#prev').show();
    }

    nextActive.addClass('active');  
  }
});

#prev {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="multi-step-wrapper" id="multi-step">
    <div id="progressbar">
        <span></span>
    </div>
    <div class="steps-inner">
        <div class="multi-step-section active" id="step1"></div>
        <div class="multi-step-section" id="step2"></div>
        <div class="multi-step-section" id="step3"></div>
        <div class="multi-step-section" id="step4"></div>
        <div class="multi-step-section" id="step5"></div>
        <div class="multi-step-section" id="step6"></div>
        <div class="multi-form-actions">
            <button id="prev" type="button">Back</button>
            <button id="next" type="button">Next</button>
        </div>
    </div>
</div>

Answer 3

因此，您可以对逻辑进行一些修复。

将=的错字固定在else if上。
调整后，将active设置为新的活动对象。
检查活动内容是否是调整后的第一个元素，而不是之前的。
作为奖励，如果将prev更改回第一个元素，还添加了隐藏。

$('.multi-form-actions button').on('click', function() {
  var el = $(this).attr('id');
  var active = $('.multi-step-section.active');

  active.removeClass('active');

  if (el == 'prev') {
    active = active.prev('.multi-step-section').addClass('active');
  } else if (el == 'next') {
    active = active.next('.multi-step-section').addClass('active');
  }

  if (active.is(":not(:first-child)")) {
    $('#prev').show();
  } else {
    $('#prev').hide();
  }
});

#prev {
  display: none;
}

.active { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="multi-step-wrapper" id="multi-step">
  <div id="progressbar">
    <span></span>
  </div>
  <div class="steps-inner">
    <div class="multi-step-section active" id="step1">a</div>
    <div class="multi-step-section" id="step2">b</div>
    <div class="multi-step-section" id="step3">c</div>
    <div class="multi-step-section" id="step4">d</div>
    <div class="multi-step-section" id="step5">e</div>
    <div class="multi-step-section" id="step6">f</div>
    <div class="multi-form-actions">
      <button id="prev" type="button">Back</button>
      <button id="next" type="button">Next</button>
    </div>
  </div>
</div>

仅当.active类不是第一个孩子时显示按钮

3 个答案: