Question

在我的HTML中我有两个按钮，一个是前一个，第二个是下一个按钮。单击下一步按钮将显示下一张幻灯片。它将通过单击上一步按钮显示上一张幻灯片。我不知道，但有时我需要点击两次才能继续上一张幻灯片。你能告诉我它为什么会这样吗？我该如何解决？我的英语很弱，如果我犯了任何语法或拼写错误，请向我道歉。

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

试试这个，

在您的代码中，您在根据当前下一个值修改上一个值之前更新了页面值。

有问题：

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 2

首先，您需要优化代码，使用技术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 3

我希望这段代码能帮到你。您的js代码正常工作我只是对点击功能进行了微小的更改。

＆＃13;

$(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");
  }
});

＆＃13;

.hide{display: none;}

＆＃13;

<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>

＆＃13;

jQuery函数不符合我的预期

3 个答案: