changing div content using button-CodePudding

I want to make a button that will create a back page if I click this it will return to the last div content. I already have the function for the next page but I'm already ran out of logic for making a function for the back page button.

Here is my code for the content and my function for the next()

function next() {
  if ($('#content1').hasClass('')) {
    $('#content2').removeClass('hidden');
    $('#back').removeClass('hidden');
    $('#content1').addClass('hidden');
  } else if ($('#content2').hasClass('')) {
    $('#content2').addClass('hidden');
    $('#content3').removeClass('hidden');
  } else if ($('#content3').hasClass('')) {
    $('#content3').addClass('hidden');
    $('#content4').removeClass('hidden');
  } else if ($('#content4').hasClass('')) {
    $('#content4').addClass('hidden');
    $('#content5').removeClass('hidden');
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div >
  <div id="content1">
    <h1>1</h1>
  </div>
  <div id="content2" >
    <h1>2</h1>
  </div>
  <div id="content3" >
    <h1>3</h1>
  </div>
  <div id="content4" >
    <h1>4</h1>
  </div>
  <div id="content5" >
    <h1>5</h1>
  </div>
  <button onclick='next()'>Next Page</button>
  <button id="back" onclick='back()' >Back Page</button>
</div>

CodePudding user response：

You can simplify this.

Here I remove the inline functions and have only one function.

Also no need for classes.

$(function() {
  $container = $("div.myDiv");
  $contents = $(".myDiv > div");
  $(".nav").on("click", function() {
    const next = $(this).is("#next"); // we clicked next
    let $cur = $container.find("div:visible"); // currently visible
    let $show = next ? $cur.next() : $cur.prev(); // next or prev div?
    $("#next").toggle($show.index() < $contents.length - 1);
    $("#prev").toggle($show.index() >= 1);
    $cur.hide();
    $show.show();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div >
  <div id="content1">
    <h1>1</h1>
  </div>
  <div id="content2" hidden>
    <h1>2</h1>
  </div>
  <div id="content3" hidden>
    <h1>3</h1>
  </div>
  <div id="content4" hidden>
    <h1>4</h1>
  </div>
  <div id="content5" hidden>
    <h1>5</h1>
  </div>
  <button  id="prev" hidden>Previous Page</button>
  <button  id="next">Next Page</button>

</div>

CodePudding user response：

You could do it like this:

function next() {
  var div = $("div[id^=content]:visible")
  var nextdiv = div.next("[id^=content]");
  if (nextdiv) {
    div.addClass("hidden");
    nextdiv.removeClass("hidden");
    $("#back").show();
    $('#next').toggle(nextdiv.next("[id^=content]").length > 0)
  }
}

function back() {
  var div = $("div[id^=content]:visible")
  var prevdiv = div.prev("[id^=content]");
  if (prevdiv) {
    div.addClass("hidden");
    prevdiv.removeClass("hidden");
    $("#next").show();
    $('#back').toggle(prevdiv.prev("[id^=content]").length > 0)
  }
}

This will make it more dynamic and easier to manage.

One thing i use here is the [id^=content] selector. That means it will only select elements where the id starts with content.

function next() {
  var div = $("div[id^=content]:visible")
  var nextdiv = div.next("[id^=content]");
  if (nextdiv) {
    div.addClass("hidden");
    nextdiv.removeClass("hidden");
    $("#back").show();
    $('#next').toggle(nextdiv.next("[id^=content]").length > 0)
  }
}

function back() {
  var div = $("div[id^=content]:visible")
  var prevdiv = div.prev("[id^=content]");
  if (prevdiv) {
    div.addClass("hidden");
    prevdiv.removeClass("hidden");
    $("#next").show();
    $('#back').toggle(prevdiv.prev("[id^=content]").length > 0)
  }
}

.hidden {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div id="content1">
    <h1>1</h1>
  </div>
  <div id="content2" >
    <h1>2</h1>
  </div>
  <div id="content3" >
    <h1>3</h1>
  </div>
  <div id="content4" >
    <h1>4</h1>
  </div>
  <div id="content5" >
    <h1>5</h1>
  </div>
  <button id="next" onclick='next()'>Next Page</button>
  <button id="back" onclick='back()' >Back Page</button>
</div>