jQuery功能沒有按照我的預期工作

Question

在我的HTML我有兩個按鈕之一，第二個是下一個按鈕。它將通過點擊下一個按鈕顯示下一張幻燈片。它將通過單擊prev按鈕顯示上一張幻燈片。我不知道，但有時我需要點擊兩次才能進入前一張幻燈片。你能告訴我爲什麼發生？以及如何解決它？我英語不好，所以如果我犯了任何語法錯誤或拼寫錯誤，請道歉。

jQuery代碼：

$("#next").click(function(){ 
    var pagenumber = $(this).data("page")-1; 
    $("#page"+pagenumber).addClass("hide"); 
    $("#page"+$(this).data("page")).removeClass("hide"); 
    if($(this).data("page") == 3){ 
     $("#next").addClass("hide"); 
    } 
    else{ 
     $('#next').data('page', $(this).data("page")+1); 
     $('#prev').data('page', $(this).data("page")-1); 
    } 
    if($("#prev").data("page") > 0 && $("#prev").hasClass("hide")){ 
     $("#prev").removeClass("hide"); 
    } 
}); 
$("#prev").click(function(){ 
    var pagenumber = $(this).data("page")+1; 
    $("#page"+pagenumber).addClass("hide"); 
    $("#page"+$(this).data("page")).removeClass("hide"); 
    if($(this).data("page") == 0){ 
     $("#prev").addClass("hide"); 
    } 
    else{ 
     $('#prev').data('page', $(this).data("page")-1); 
     $('#next').data('page', $(this).data("page")+1); 
    } 
    if($("#next").data("page") < 3 && $("#next").hasClass("hide")){ 
     $("#next").removeClass("hide"); 
    } 
}); 

HTML代碼：

<div style="text-align:left"><a id="prev" class="hide" data-page="0">< PREV</a></div> 
<div style="text-align:right"><a id="next" data-page="1">NEXT ></a></div> 

Answer 1

所有你需要優化你的代碼首先，使用的己技巧jQuery selector caching

var $next = $("#next"); 
var $prev = $("#prev"); 
$next.click(function() { 
    var pagenumber = $next.data("page") - 1; 
    $("#page" + pagenumber).addClass("hide"); 
    $("#page" + $next.data("page")).removeClass("hide"); 
    if ($next.data("page") == 3) { 
    $next.addClass("hide"); 
    } else { 
    $next.data('page', $next.data("page") + 1); 
    $prev.data('page', $next.data("page") - 1); 
    } 
    if ($prev.data("page") > 0 && $prev.hasClass("hide")) { 
    $prev.removeClass("hide"); 
    } 
}); 
$prev.click(function() { 
    var pagenumber = $prev.data("page") + 1; 
    $("#page" + pagenumber).addClass("hide"); 
    $("#page" + $prev.data("page")).removeClass("hide"); 
    if ($prev.data("page") == 0) { 
    $prev.addClass("hide"); 
    } else { 
    $prev.data('page', $prev.data("page") - 1); 
    $next.data('page', $prev.data("page") + 1); 
    } 
    if ($next.data("page") < 3 && $next.hasClass("hide")) { 
    $next.removeClass("hide"); 
    } 
}); 

Answer 2

試試這個，

在你的代碼，你修改以前的基於當前的下一個值之前更新的頁面值。

問題的：

else{ 
     // you updated next here 
     $('#next').data('page', $(this).data("page")+1); 
     // instead of using previous value you get updated value. 
     $('#prev').data('page', $(this).data("page")-1); 
    } 

因此，嘗試以下，

$("#next").click(function(){ 
    var pagenumber = $(this).data("page")-1; 
    $("#page"+pagenumber).addClass("hide"); 
    $("#page"+$(this).data("page")).removeClass("hide"); 
    if($(this).data("page") == 3){ 
     $("#next").addClass("hide"); 
    } 
    else{ 
     $('#prev').data('page', $(this).data("page")-1); 
     $('#next').data('page', $(this).data("page")+1); 
    } 
    if($("#prev").data("page") > 0 && $("#prev").hasClass("hide")){ 
     $("#prev").removeClass("hide"); 
    } 
}); 
$("#prev").click(function(){ 
    var pagenumber = $(this).data("page")+1; 
    $("#page"+pagenumber).addClass("hide"); 
    $("#page"+$(this).data("page")).removeClass("hide"); 
    if($(this).data("page") == 0){ 
     $("#prev").addClass("hide"); 
    } 
    else{ 
     $('#next').data('page', $(this).data("page")+1); 
     $('#prev').data('page', $(this).data("page")-1); 
    } 
    if($("#next").data("page") < 3 && $("#next").hasClass("hide")){ 
     $("#next").removeClass("hide"); 
    } 
}); 

Answer 3

我希望這個片段將幫助你。您的js代碼正在工作我只是對點擊功能進行了微小更改。

$(document).on("click", "#next", function(){ 
 
    var pagenumber = $(this).data("page")-1; 
 
    $("#page"+pagenumber).addClass("hide"); 
 
    $("#page"+$(this).data("page")).removeClass("hide"); 
 
    if($(this).data("page") == 5){ 
 
    $("#next").addClass("hide"); 
 
    } 
 
    else{ 
 
    $('#next').data('page', $(this).data("page")+1); 
 
    $('#prev').data('page', $(this).data("page")-1); 
 
    } 
 
    if($("#prev").data("page") > 0 && $("#prev").hasClass("hide")){ 
 
    $("#prev").removeClass("hide"); 
 
    } 
 
}); 
 

 

 
$(document).on("click", "#prev", function(){ 
 
    var pagenumber = $(this).data("page")+1; 
 
    $("#page"+pagenumber).addClass("hide"); 
 
    $("#page"+$(this).data("page")).removeClass("hide"); 
 
    if($(this).data("page") == 0){ 
 
    $("#prev").addClass("hide"); 
 
    } 
 
    else{ 
 
    $('#prev').data('page', $(this).data("page")-1); 
 
    $('#next').data('page', $(this).data("page")+1); 
 
    } 
 
    if($("#next").data("page") < 5 && $("#next").hasClass("hide")){ 
 
    $("#next").removeClass("hide"); 
 
    } 
 
});

.hide{display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="text-align: center;"> 
 
    <h2 class="show" id="page0">Page #1</h2> 
 
    <h2 class="hide" id="page1">Page #2</h2> 
 
    <h2 class="hide" id="page2">Page #3</h2> 
 
    <h2 class="hide" id="page3">Page #4</h2> 
 
    <h2 class="hide" id="page4">Page #5</h2> 
 
    <h2 class="hide" id="page5">Page #6</h2> 
 

 
    <hr> 
 

 
    <button id="prev" class="hide" data-page="0">&larr; PREV</button> 
 
    <button id="next" data-page="1">NEXT &rarr;</button> 
 
</div>