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>