在多個頁面

jQuery的下一步按鈕以前我有這樣的： Jquery to display next button once a input button is clicked 在多個頁面

現在我需要獲得下一張幻燈片此按鈕以同樣的方式作爲第一張幻燈片的功能。請參閱我的代碼：

DEMO CODE 只需剪斷下方

<input type="radio" name="options" id="option2" name="1" class="a"> <span class="label num" style="font-size:18px; margin-bottom:15px; border-radius:0px;">A</span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
    </label> 

    <label class="btn btn-default"> 
    <input type="radio" name="options" id="option2" name="1" class="b"> <span class="label num" style="font-size:18px;margin-bottom:15px;border-radius:0px;">B</span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
    </label> 

    <label class="btn btn-default"> 
    <input type="radio" name="options" id="option3" name="1" class="c"> <span class="label num" style="font-size:18px;margin-bottom:15px;border-radius:0px;">C</span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
    </label> 

    <label class="btn btn-default"> 
    <input type="radio" name="options" id="option3" name="1" class="d"> <span class="label num" style="font-size:18px;margin-bottom:15px;border-radius:0px;">D</span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
    </label> 

</div> 
<br/> 
<br/> 

<div align="left"> 
<button id= "nextbtn" class="btn btn2 btn-default" name="next" style>Next</button> 
</div> 
    </div>

來源

2014-12-04 Sole

我無法看到小提琴中的下一個按鈕。 – BNN 2014-12-04 12:32:50

嗨納迪姆，是的，但它需要用戶點擊選擇後，像第一張幻燈片出現 – Sole 2014-12-04 12:34:10

喔，我的事普山的回答是完美 – BNN 2014-12-04 12:37:31

你的代碼工作的滑動，問題是在next按鈕顯示。正如你已經使用下面的代碼來顯示/隱藏你已經使用id="nextbtn"下一個按鈕的按鈕。

$(function(){ 
    $('#nextbtn').hide(); 
    $('input:radio').change(
    function(){ 
     $('#nextbtn').show(); 
    } 
);

在jQuery中，你不能爲多個元素使用相同的id，所以要麼刪除它，要麼將其重命名爲唯一的id。

可以說id="namebtn1"和id="namebtn2"，並修改下面的代碼

$("button[name=next]").click(function (e) { 
     //hide current button after click 
     $(this).hide(); 
     divs.eq(now).hide(); 
     now = (now + 1 < divs.length) ? now + 1 : 0; 
     divs.eq(now).fadeIn(); // show next 
    }); 

    $(function(){ 
    //hide button 
    $('button[name=next]').hide(); 
    $('input:radio').change(
     function(){ 
     //show button for clicked div 
     $(this).closest('div[class^=item]').find('button[name=next]').show(); 
    });   
    });

jsfiddle demo

注意 - 你必須在你的代碼$(document).ready(...和$(function(){..，兩者都是爲了同一個目的，即運行腳本畢竟DOM元素加載後，不需要放置多個時間（儘管您的代碼將工作）。

所以去掉其中一方，並把整個腳本內一個（即$(document).ready(...或$(function(){..）如圖所示here

來源

2014-12-04 12:34:03

喜普山，感謝這個，如果我想以前的按鈕添加到什麼也出現？ – Sole 2014-12-04 12:51:48

在這種情況下，你需要以同樣的方法添加點擊處理程序先前的按鈕和顯示/隱藏因爲這樣做對下一個按鈕，即添加上一個按鈕，顯示/隱藏其中一個按鈕的代碼存在。 – 2014-12-04 13:30:11

你有一個小提琴演示的例子嗎？ – Sole 2014-12-04 13:59:37

更新，請參閱http://jsfiddle.net/dvgxga2j/18/

$(document).ready(function() { 
    var divs = $('.wrapper>div'); 
    var now = 0; // currently shown div 
    divs.hide().first().fadeIn(); 
    $("button[name=next]").click(function (e) {     
     divs.eq(now).hide(); 
     now = (now + 1 < divs.length) ? now + 1 : 0; 
     divs.eq(now).fadeIn(); 
     $(e.target).hide(); 
    }); 
});

你可以移動下一個按鈕之外，在顯示下一個div後隱藏它

來源

2014-12-04 12:35:56 hint

回答

相關問題