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

我正在使用jQuery创建一个多步骤表单，并且我试图只在活动类不在第一个子类上时显示

#prev

按钮。默认情况下，我将

display:none

添加到

#prev

以在加载时隐藏它，但当

.active

类添加到其他部分时，我很难显示它

当在if语句中使用

is（“：not（：first child））

将其作为目标时，它会工作，但仅在将活动类添加到

步骤3

时才会显示

有人能告诉我如何确保按钮仅在每个部分都有class

.active

时可见，除了

#step1

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

HTML

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');
  }

});

---

为了使这项工作顺利进行，您需要做以下几件事：

隐藏所有未激活的步骤（我假设您已经在这样做了，为了简短的示例代码而将其忽略）

从所有同级步骤容器中删除活动状态实际上，这是不必要的，在我看来是一个谬误

使用相应的下一步/上一步更新

活动
变量集合中保存的元素

之后移动按钮状态检查

当激活步骤是第一步时隐藏按钮

当所有步骤都完成时，您还必须处理该案例，但这超出了本问题的范围

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

$（'.multi-form actions button'）。在（'click'，function（）上{
var el=$（this.attr（'id'）；
var active=$（'.multi-step section.active'）；
//还要从同级中删除活动类
active.removeClass（'active'）；
如果（el=='prev'| | el=='next'）{//如果您有其他按钮
active=active[el]（'.multi-step section'）。addClass（'active'）；；
}
//根据情况显示或隐藏上一个按钮
$（'prev'）[active.is（“：not（：first child）”）？'show'：'hide']（）；
})；

#prev，
.多步骤部分{
显示：无；
}
.多步骤剖面图.激活{
显示：块；
}

步骤1
步骤二
步骤三
步骤四
步骤5
步骤6
返回
下一个

要使这项工作正常进行，您需要做几件事：

隐藏所有未激活的步骤（我假设您已经在这样做了，为了简短的示例代码而将其忽略）

从所有同级步骤容器中删除活动状态实际上，这是不必要的，在我看来是一个谬误

使用相应的下一步/上一步更新

活动
变量集合中保存的元素

之后移动按钮状态检查

当激活步骤是第一步时隐藏按钮

当所有步骤都完成时，您还必须处理该案例，但这超出了本问题的范围

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

$（'.multi-form actions button'）。在（'click'，function（）上{
var el=$（this.attr（'id'）；
var active=$（'.multi-step section.active'）；
//还要从同级中删除活动类
active.removeClass（'active'）；
如果（el=='prev'| | el=='next'）{//如果您有其他按钮
active=active[el]（'.multi-step section'）。addClass（'active'）；；
}
//根据情况显示或隐藏上一个按钮
$（'prev'）[active.is（“：not（：first child）”）？'show'：'hide']（）；
})；

#prev，
.多步骤部分{
显示：无；
}
.多步骤剖面图.激活{
显示：块；
}

步骤1
步骤二
步骤三
步骤四
步骤5
步骤6
返回
下一个

尝试类似的方法，这也将确保有下一个活动步骤要激活

$（'.multi-form actions button'）。在（'click'，function（）上{
var el=$（this.attr（'id'）；
var active=$（'.multi-step section.active'）；
非接触性；
如果（el=='prev'）{
nextActive=active.prev（'.multi-step section'）；
}
else if（el=‘next’）{
nextActive=active.next（'.multi-step section'）；
}
如果（nextActive.length>0）{
active.removeClass（'active'）；
if（nextActive.is（“：first child”））{
$（'#prev'）.hide（）；
}
否则{
$（'#prev'）.show（）；
}
nextActive.addClass（'active'）；
}
})；

#prev{
显示：无；
}

返回
下一个

尝试类似的方法，这也将确保有下一个活动步骤要激活

$（'.multi-form actions button'）。在（'click'，function（）上{
var el=$（this.attr（'id'）；
var active=$（'.multi-step section.active'）；
非接触性；
如果（el=='prev'）{
nextActive=active.prev（'.multi-step section'）；
}
else if（el=‘next’）{
nextActive=active.next（'.multi-step section'）；
}
如果（nextActive.length>0）{
active.removeClass（'active'）；
if（nextActive.is（“：first child”））{
$（'#prev'）.hide（）；
}
否则{
$（'#prev'）.show（）；
}
nextActive.addClass（'active'）；
}
})；

#prev{
显示：无；
}

返回
下一个

因此，对您的逻辑进行一些修复

修复了else if上的

=

打字错误

调整后，将

激活设置为新激活

检查激活的元素是否是调整后的第一个元素，而不是调整前的元素，因此它是准确的

作为奖励，还添加了隐藏上一个元素（如果它更改回第一个元素）

$（'.multi-form actions button'）。在（'click'，function（）上{
var el=$（this.attr（'id'）；
var active=$（'.multi-step section.active'）；
active.re
#prev {
  display: none;
}

$('.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');
  }

});