使用按鈕更改div內容

我想制作一個按鈕，back page如果我點擊它，它將創建一個按鈕，它將回傳到最后一個 div 內容。我已經有了下一頁的功能，但我已經沒有為back page按鈕制作功能的邏輯了。

這是我的內容代碼和我的功能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 class="myDiv">
  <div id="content1">
    <h1>1</h1>
  </div>
  <div id="content2" class="hidden">
    <h1>2</h1>
  </div>
  <div id="content3" class="hidden">
    <h1>3</h1>
  </div>
  <div id="content4" class="hidden">
    <h1>4</h1>
  </div>
  <div id="content5" class="hidden">
    <h1>5</h1>
  </div>
  <button onclick='next()'>Next Page</button>
  <button id="back" onclick='back()' class="hidden">Back Page</button>
</div>

uj5u.com熱心網友回復：

您可以簡化這一點。

在這里，我洗掉了行內函式，并且只有一個函式。

也不需要上課。

$(function() {
  const $container = $("div.myDiv");
  const $contents = $(".myDiv > div");
  const last = $contents.length - 1;

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="myDiv">
  <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 class="nav" id="prev" hidden>Previous Page</button>
  <button class="nav" id="next">Next Page</button>
  <button id="reveal" hidden>Reveal</button>

</div>

uj5u.com熱心網友回復：

你可以這樣做：

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

這將使其更加動態和易于管理。

我在這里使用的一件事是[id^=content]選擇器。這意味著它只會選擇 id 以 開頭的元素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 class="myDiv">
  <div id="content1">
    <h1>1</h1>
  </div>
  <div id="content2" class="hidden">
    <h1>2</h1>
  </div>
  <div id="content3" class="hidden">
    <h1>3</h1>
  </div>
  <div id="content4" class="hidden">
    <h1>4</h1>
  </div>
  <div id="content5" class="hidden">
    <h1>5</h1>
  </div>
  <button id="next" onclick='next()'>Next Page</button>
  <button id="back" onclick='back()' class="hidden">Back Page</button>
</div>

標籤：html jQuery

上一篇：在另一個方法的內部函式中呼叫this.method()

下一篇：單擊導航欄中的下拉串列時導致未捕獲的語法錯誤