Question

我得到了这个多步骤联系表单，我想根据我所在表单的哪个步骤向特定 div 添加一个类。

当前步骤用“.current”类指定。如您所见，我的表单的第 1 步当前处于活动状态（页面加载时的默认设置）。

<ul class="multi-step-list">
   <li class="step-1 current">Name</li>
   <li class="step-2">Address</li>
   <li class="step-3">Message</li>
   <li class="step-4">Send</li>
</ul>

现在我有一个 div，我想在其中添加一个类，当第 2 步与类“.current”处于活动状态时根据我所在的步骤，“.current”会自动切换到我的当前步骤。

因此，当第 2 步处于活动状态时，我想将类“.myClass”添加到我的 div“myDiv”中。

jQuery(document).ready(function( $ ){
    if($('li.step-2').hasClass('current')) {
        $('div.myDiv').toggleClass('myClass');
    }
});

我知道我错了，因为这只会在页面加载时生效，并且步骤 2 是预先选择的。 “.myClass”应该只在“.step-2”有“.current”类并且当我切换到例如时出现第 3 步，类必须消失。

我希望我能在这里得到一些建议。

Answer 1

如果您想在表单更改为特定步骤时切换 .myClass only，您应该在更改表单步骤的同一函数中设置 .myClass .

因此，不要在 .myClass -callback 中设置 $(document).ready()，而是将其设置在用于切换表单步骤的函数中（您没有包含在您的问题中）。并在该函数中检查要切换到的步骤是否为“2”，然后在 div 上设置 .myClass。否则从 div 中删除 .myClass。

Answer 2

您可以只在您单击的那个上调用一个事件，并从除您单击的那个以外的所有兄弟中删除该类（并将其添加到该类中）。并将相同的逻辑应用于要更改的 div。像这样

$(document).ready(function(){

  $(".step").each(function() {
         $(this).click(function(e) {
     var step2 = 'two';
     $(this).addClass("active-step").siblings().removeClass("active-step");
     if (e.target.id == step2) {
      $(".myDiv").addClass("something");
     } else {
     $(".myDiv").removeClass("something");
     }
    });
});

});

ul {
  padding: 2rem;
}

li {
  padding: .5rem 1rem;
  background: darkorchid;
  list-style: none;
  color: white;
  font-family: sans-serif;
}

li:not(:first-of-type) {
  margin-top: 1rem;
}

.active-step {
  box-shadow: 0px 4px 6px rgba(0,0,0,.6);
  background: teal;
}

.myDiv {
  height: 100px;
  width: 100px;
  background: goldenrod;
}

.something {
  background: royalblue;
  width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="multi-step-list">
   <li class="step step-1 current">Name</li>
   <li class="step step-2" id="two">Address</li>
   <li class="step step-3">Message</li>
   <li class="step step-4">Send</li>
</ul>

<div class="myDiv"></div>

页面加载完毕后将 CSS 添加到特定类

2 个答案: