jQuery function is not working as per my expectation

Question

in my HTML I have two buttons one is previous and second is next button. it will be display next slide by clicking next button. it will be display previous slide by clicking prev button. I didn't know but sometime I need to click two times for going on previous slide. Can you please tell me why it happening? and How can I resolve it? I am weak in English so please apologize me if I made any Grammatical or Spelling mistakes.

jQuery code:

$("#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 code:

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

put an alert() in each click see whether the click events working properly — M14, Nov 25 '16 at 05:42
@SirajAbbas Yes click event is working properly and it value is 1 when prev button is starting to appear — Rushabh Shah, Nov 25 '16 at 05:49
@RushabhShah you need to use existing values before you update them based on new page. See my answer below — ScanQR, Nov 25 '16 at 06:00

score 0 · Answer 1 · answered Nov 25 '16 at 05:54

Try this,

In your code, you updated the page value before modifying the previous based on current next value.

Problematic :

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

So try following,

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

score 0 · Accepted Answer · edited May 23 '17 at 12:30

First of all you need to optimize you code, utilized a 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");
  }
});

score 0 · Answer 3 · answered Nov 25 '16 at 06:20

I hope this snippet will helps you. Your js code is working I just minor changes for click functionality.

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

jQuery function is not working as per my expectation

3 Answers3