javascript - 在按钮之前查找 div

Question

当单击按钮时，我尝试将Class添加到向导步骤，但仍然没有运气:/

 <div class="mt-4">
    <div class="wizard-steps">
      <div class="wizard-step">
        <div class="wizard-step-icon">
          <i class="far fa-user"></i>
       </div>
    </div>

    <form class="wizard-content mt-2" id="regForm">
    <fieldset>
    <div class="form-group row">
        <div class="col-lg-4 col-md-6 text-right">
            <button type="button" onclick="step0(this);" class="btn">Next</button>
        </div>
     </div>
    </fieldset>
    </form>
  </div>

JavaScript:

<script>
 function step0(element) {
  $(element).prev('div').find('.wizard-step').addClass('wizard-step-active');
      }
</script>

谁能帮帮我吗？

Answer 1

prev用于检索前一个同级元素。 .wizard-step您想要的目标是被单击按钮的父级的兄弟级的子级。因此，您需要使用 closest()相反。

另请注意 onclick (以及所有其他 onX 属性)不是好的做法，应该避免。由于您已经在使用 jQuery，因此您可以不显眼地附加事件，如下所示:

jQuery($ => {
  $('.btn').on('click', function() {
    $(this).closest('.wizard-steps').find('.wizard-step').addClass('wizard-step-active');
  });
});

.wizard-step-active { color: #C00; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mt-4">
  <div class="wizard-steps">
    <div class="wizard-step">
      <div class="wizard-step-icon">
        <i class="far fa-user">User icon</i>
      </div>
    </div>
    <form class="wizard-content mt-2" id="regForm">
      <fieldset>
        <div class="form-group row">
          <div class="col-lg-4 col-md-6 text-right">
            <button type="button" class="btn">Next</button>
          </div>
        </div>
      </fieldset>
    </form>
  </div>

或者，不要调用 find()从共享父级中，您可以选择 form并使用prev() :

$('.btn').on('click', function() {
  $(this).closest('.wizard-content').prev('.wizard-step').addClass('wizard-step-active');
});

两者都可以，这仅取决于您的 HTML 结构如何最适合此用例。