Question

我有这个标记。

<form>
  <fieldset id="step-1">
    <!-- form code-->
    <a class="previous"></a>
    <a class="next"></a>
  </fieldset>

  <fieldset id="step-2">
    <!-- form code-->
    <a class="previous"></a>
    <a class="next"></a>
  </fieldset>

  <fieldset id="step-3">
    <!-- form code-->
    <a class="previous"></a>
    <a class="next"></a>
  </fieldset>

</form>

我的jQuery

      $('.previous').on('click', function(evr) {
        evr.preventDefault();
        if ($(this).closest('fieldset').not('#step-1')){
          $(this).parent('fieldset').slideUp(function(){
            $(this).prev('fieldset').slideDown(); // this doesn't work
          });
        }
      });
      $('.next').on('click', function(e){
        e.preventDefault();
        if ($(this).closest('fieldset').not('#step-3')){
            $(this).closest('fieldset').slideUp();
            $(this).closest('fieldset').next('fieldset').slideDown();
        } 
        else if ($(this).closest('fieldset').is('#step-3')) {
          $('#step-3').slideUp();
        }
      });

我正在尝试创建一个多步模式，当您单击下一个按钮时，每个字段集将隐藏自己。我遇到的问题是上一个按钮。我似乎无法从第二个字段集的上一个按钮中选择第一个字段集。

如何选择上一个字段集？这也应该来自＃step-3。

Answer 1

您可以在jquery中使用第一个和最后一个方法以及psudo选择器

$('.previous').not(':first').on('click', function(e) {
    e.preventDefault();
    $(this).parent('fieldset').slideUp(function(){
       $(this).prev('fieldset').slideDown(); // this doesn't work
    });

  });
  $('.next').not(':last').on('click', function(e){
        e.preventDefault();
        $(this).closest('fieldset').slideUp();
        $(this).closest('fieldset').next('fieldset').slideDown();
  });

$('.previous:first').click(function(e){
    console.log('first prev clicked');
});
$('.next:last').click(function(e){
    console.log('last next clicked');
     $('fieldset:last').slideUp();
})

Answer 2

将:first选择器与类选择器一起使用，如下所示

$('.previous:first').on('click', function(evr) {
   alert("first");
});
$('.next:first').on('click', function(e){
   alert("nfirst");
});

示例小提琴https://jsfiddle.net/x3x0dr2x/

Answer 3

您可以使用.first()选择任何类的第一个元素，其中类被分配给多个元素。

查看使用手册here

如何只选择此课程的第一次出现？

3 个答案: