使用jQuery將某些div/li與css屬性對齊

Question

我想知道我是否可以將某個div作爲目標或僞類。 我認爲答案可能是一些「if else」，但我不知道該怎麼做。

我工作的一些形式由該用戶導航與繼續和回按鍵步驟顯示。

「步驟」由ol li分隔。 之後，我有3個「按鈕」：返回,繼續和發送。

<section class="modal-questions"> 
     <form id="form001" name="form001" method="post"> 
      <div class="modal-questions-list"> 
       <ol> 
        <!-- question 01 --> 
        <li class="li-visible"> 
         <h4>Question 01</h4> 
         <input id="opt1a" type="radio" name="Q1" value="1"> 
         <label for="opt1a">Options</label> 
        </li> 

        <!-- question 02 --> 
        <li> 
         <h4>Question 02</h4> 
         <input id="opt2b" type="radio" name="Q2" value="1"> 
         <label for="opt2b">Options</label> 
        </li> 

        <!-- question 03 --> 
        <li> 
         <h4>Question 0</h4> 
         <input id="opt3b" type="radio" name="Q3" value="1"> 
         <label for="opt3b">Options</label> 
        </li> 

        <!-- question 04 --> 
        <li> 
         <h4>Question 04</h4> 
         <input id="opt4b" type="radio" name="Q4" value="1"> 
         <label for="opt4b">Options</label> 
        </li> 
       </ol> 
      </div> 
     </form> 
    </section> 

    <section class="modal-bottom"> 
     <div class="X-button-flat" id="prevStep"> 
      Back 
     </div> 
     <br /> 
     <div class="X-button-small s-button-orange" id="nextStep"> 
      Continue 
     </div> 

     <div class="X-button-small s-button-orange" id="finalStep"> 
      Send 
     </div> 
    </section> 

在CSS中，li是隱藏的，除了具有.li-visible的一個 - 即用戶正在觀看的人。

li { 
    display: none; 
} 

.li-visible { 
    display: block; 
} 

與jQuery，當用戶點擊繼續我removeClass('li-visible')到具有它的li，並把它添加到next一個展示給用戶。當用戶點擊返回我這樣做，但對以前的li。

$('.modal-bottom').on('click', '#nextStep', function() { 
    $('li.li-visible').removeClass('li-visible').next().addClass('li-visible'); 
    $('#prevStep').css({'opacity':'1'}); 
}); 

$('.modal-bottom').on('click', '#prevStep', function() { 
    $('li.li-visible').removeClass('li-visible').prev().addClass('li-visible'); 
}); 

到目前爲止好。現在的問題：

1. 當用戶點擊時繼續，我想隱藏按鈕，顯示發送按鈕到達倒數第二個問題。

2. 當用戶在第二個問題中點擊返回時，我想要隱藏該按鈕。

P.S.
在這個例子中有4個問題，但表單沒有固定數量的問題，所以它必須在3或99個問題中工作。

還有就是JSfiddle

Answer 1

您可以使用:first-child和:last-child選擇

$('#prevStep, #finalStep').hide(); 

$('.modal-bottom').on('click', '#nextStep', function() { 
    var i = $('li.li-visible').removeClass('li-visible').next().addClass('li-visible'); 
    if(i.is(':last-child')){ 
     $(this).hide(); 
     $('#finalStep').show(); 
    } 
    $('#prevStep').show(); 
}); 

$('.modal-bottom').on('click', '#prevStep', function() { 
    var i = $('li.li-visible').removeClass('li-visible').prev().addClass('li-visible'); 
    if(!i.is(':last-child')){ 
     $('#nextStep').show(); 
     $('#finalStep').hide(); 
    } 
    if(i.is(':first-child')){ 
     $(this).hide(); 
    } 
}); 

（注：我已經使用.hide()和.show()方法而不是.css(...)）

JSFiddle demo

---

還是有點更緊湊的解決方案，具有.toggle(display)：

$('.modal-bottom').on('click', '#nextStep', function() { 
    var i = $('.li-visible').removeClass('li-visible').next().addClass('li-visible').is(':last-child'); 
    $(this).toggle(!i); 
    $('#finalStep').toggle(i); 
    $('#prevStep').show(); 
}); 

$('.modal-bottom').on('click', '#prevStep', function() { 
    var i = $('.li-visible').removeClass('li-visible').prev().addClass('li-visible').is(':last-child'); 
    $('#nextStep').toggle(!i); 
    $('#finalStep').toggle(i); 
    $(this).toggle(!$('li.li-visible').is(':first-child')); 
}); 

JSFiddle demo