如何使用JQuery為Next和Prev按鈕顯示/隱藏單個HTML頁面的部分創建有效的方法？

Question

我有一個包含多個部分的HTML文件，我需要一次顯示一個部分。 每個部分的底部都有“下一個”和“上一個”按鈕，這些按鈕將顯示下一個部分並隱藏當前處於焦點的部分。

最初，我使用一種非常簡單的方法來實現這一目標：

<section id="Page1" class="page" style="display:none">
  <p>Content of page 1</p>
  <h3><span onclick="show('Page2');">Next</span></h3>
</section>
<section id="Page2" class="page" style="display:none">
  <p>Content of page 2</p>
  <h3><span onclick="show('Page1');">Previous</span></h3>
  <h3><span onclick="show('Page3');">Next</span></h3>
</section>
<section id="Page3" class="page" style="display:none">
  <p>Content of page 3</p>
  <h3><span onclick="show('Page2');">Previous</span></h3>
</section>

但是，由於各節的數量會有所波動，並且第一節和最后一節的內容始終相同，因此，我想使使用此HTML模板的人員可以輕松地刪除其間不需要的所有節，而無需更新上一個/下一個按鈕代碼定位的ID。

這是我的小提琴： 下一個上一個按鈕小提琴

我啟動了一些ALMOST可以工作的JQuery（在// Next Prev Buttons注釋下）。 我正在使用：focus，這意味着它僅針對包含按鈕的Span，但是我無法弄清楚按鈕的父Section標簽的選擇器。

在此先感謝您的時間。 :)

Answer 1

將功能更改為此：

//Next Prev Buttons

$('.pageNext').on('click', function showNext(){
    //$(":focus").next('section').show();
    $(this).parent().parent().hide();
$(this).parent().parent().next().show();
});

$('.pagePrev').on('click', function showPrev(){
    //$(":focus").next('section').show();
    $(this).parent().parent().hide();
$(this).parent().parent().prev().show();
});

Answer 2

:focus選擇器不會選擇您的<span>因為它不是通常的“可粘貼”元素 。 由於<span>是被單擊以觸發單擊處理程序的元素，因此您可以通過this （如果需要jQuery版本，則可以通過$(this)對其進行訪問）。

$.next 僅搜索選定元素的同級 。 由於下一部分不是您的<span>的兄弟，因此$.next找不到它。 您需要找到帶有$.closest('section')的父<section> ，然后從那里移至下一部分。

您正在使用$(this).hide(); ，僅隱藏被單擊的元素。 同樣，使用$(this).closest('section')查找整個部分並將其隱藏。

使用JavaScript中定義的點擊處理程序，您就不需要HTML中的onclick屬性。 刪除它們。

放在一起：

 $('.pageNext').on('click', function showNext() { // cache DOM lookups when possible const $currentSection = $(this).closest('section'); $currentSection.next('section').show(); $currentSection.hide(); }); $('.pagePrev').on('click', function showPrev() { const $currentSection = $(this).closest('section'); $currentSection.prev('section').show(); $currentSection.hide(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section id="Page1" class="page" style=""> <p>Content of page 1</p> <h3><span class="pageNext">Next</span></h3> </section> <section id="Page2" class="page" style="display:none"> <p>Content of page 2</p> <h3><span class="pagePrev">Previous</span></h3> <h3><span class="pageNext">Next</span></h3> </section> <section id="Page3" class="page" style="display:none"> <p>Content of page 3</p> <h3><span class="pagePrev">Previous</span></h3> <h3><span class="pageNext">Next</span></h3> </section> <section id="Page4" class="page" style="display:none"> <p>Content of page 4</p> <h3><span class="pagePrev">Previous</span></h3> <h3><span class="pageNext">Next</span></h3> </section> <section id="Page5" class="page" style="display:none"> <p>Content of page 5</p> <h3><span class="pagePrev">Previous</span></h3> <h3><span class="pageNext">Next</span></h3> </section> <section id="Page6" class="page" style="display:none"> <p>Content of page 6</p> <h3><span class="pagePrev">Previous</span></h3> <h3><span class="pageNext">Next</span></h3> </section> <section id="Page7" class="page" style="display:none"> <p>Content of page 7</p> <h3><span class="pagePrev">Previous</span></h3> </section> 

如果更詳細地講，這也可以輕松地轉換為原始JavaScript：

// $('.pageNext').on('click', function showNext() {
document.querySelectorAll('.pageNext').forEach(element => {
  element.addEventListener('click', function showNext(event) {
//  const $currentSection = $(this).closest('section');
    const currentSection = event.target.closest('section');
//  $currentSection.next('section').show();
//  (not a direct translation but it works since you don't have
//  non-section siblings)
    currentSection.nextElementSibling.style.display = 'block';
    // or previousElementSibling for $.prev
//  $currentSection.hide();
    currentSection.style.display = 'none';
  });
});