2016-09-15 46 views
-1

我有這個標記。如何才能選擇此類的第一次出現?

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

我試圖創建一個多步驟的模式,每個Fieldset將隱藏自身,當你點擊下一步按鈕。我遇到的問題是上一個按鈕。我似乎無法從第二個字段集的上一個按鈕中選擇第一個字段集。

如何選擇以前的字段集?這也應該從第3步起作用。

+1

嘗試使用':在JS – Sasikumar

+0

或'first'選擇:當量(0)', '.eq(0)','.first()' –

+1

這應該很容易研究 – charlietfl

回答

1

可以使用第一和最後一個方法和psudo選擇在jQuery的

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

與類選擇像如下所示使用:first選擇

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

例撥弄https://jsfiddle.net/x3x0dr2x/

0

可以使用.first()用於選擇任何類,其中類被分配給多個元件的第一元件。

檢查使用說明書here

+0

這樣可以正常工作,但有3個步驟。如果我點擊第3步中的上一個按鈕,這將只會使第1步重新出現。 – ProEvilz

相關問題