Функция 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

Прежде всего, вам нужно оптимизировать ваш код, использовал techique 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>