jQuery功能无法正常工作

鲁沙卜·莎（Rushabh Shah）

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

阿杰·纳兰（Ajay Narain Mathur）

首先，您需要利用优化的jQuery选择器缓存来优化代码

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。