jQuery 函数没有按我的预期工作答案

【问题标题】：jQuery function is not working as per my expectationjQuery 函数没有按我的预期工作
【发布时间】：2016-11-25 05:40:02
【问题描述】：

在我的 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>

【问题讨论】：

尽量提供jsfiddle链接
在每次点击中放置一个 alert() 看看点击事件是否正常
console.log() 会更好。
@SirajAbbas Yes click 事件正常工作，当 prev 按钮开始出现时它的值为 1
@Rushabh Shah 你能创建一个 jsfiddle。

标签： javascript jquery html

【解决方案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");
  }
});

【讨论】：

【解决方案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");
    }
});

【讨论】：

【解决方案3】：

我希望这个 sn-p 对你有帮助。您的 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>

【讨论】：