单击按钮以显示下一个 div？-解网

问：

我有一个包含多个 div 的页面。我希望有一些按钮，当单击这些按钮时，可以转到下一个 div.例如，Div #1 在页面上可见。它上面有一个“下一步”按钮。当用户单击“下一步”按钮时，它会转到同一页面上以前隐藏/不可见的另一个 div（设置为 display：none）。这是我正在编辑的网页。如果可能的话，我愿意使用非 JS 解决方案，但我认为 JS 是解决这个问题的最佳/最有效方法？

我在想这样的事情，但复制它不起作用，无论我修改代码多少，我尝试过的任何其他方法也没有用。

我对 javascript 了解不多，所以在获得必要的知识之前尝试这个是我的错，但我迫切希望让它工作哈哈

这是我尝试用我的代码做的一个高度简化的版本：

CSS：

.entry {
      text-align: left;
      padding-top: 0px;
      padding-bottom: 1px;
      padding-left: 10px;
      padding-right: 10px;
      font-size: 15px;
      font-family: Book Antiqua;
      width: 550px;
      height:500px;
      overflow:auto;
      margin: auto;
    }

HTML格式：

<div class="entry">

<p>paragraph text 1</p>

<button class="next">Next</button>
</div>


<div class="entry" style="display:none;">

<p>paragraph text 2</p>
<button class="back">Back</button>
<button class="next">Next</button>

</div>


<div class="entry" style="display:none;">

<p>paragraph text 3</p>
<button class="back">Back</button>
<button class="next">Next</button>

</div>

Javascript的：

$('.next').click(function(){
   $(this).parent().hide().next().show();//hide parent and show next
});

$('.back').click(function(){
   $(this).parent().hide().prev().show();//hide parent and show previous
});

我相信问题与缺少父元素有关？但我不确定。

JavaScript HTML CSS 按钮 onclick

$(this)- 选择刚刚点击的按钮
.parent()选择按钮的父元素，该元素应为该元素.entry
.hide()- 这将隐藏刚刚选择的元素.entry
.next()- 这将选择出现在刚刚选择的元素之后的元素。希望这将是另一个因素。.entry.entry
.show()- 这将显示现在选择的任何元素

相反，我建议做这样的事情。首先，我们选择所有元素一次，并跟踪当前显示的元素的索引。.entry

当点击一个按钮时，我们要么让这个数字上升或下降，然后用匹配的索引显示。这不再要求 HTML 采用极其特定的格式和顺序。.entry

const entryElements = $('.entry');
let entryIndex = 0;

$('.next').click(function(){
   entryIndex++;
   entryElements.hide();
   $(entryElements[entryIndex]).show();
});

$('.back').click(function(){
   entryIndex--;
   entryElements.hide();
   $(entryElements[entryIndex]).show();
});

.entry {
  text-align: left;
  padding-top: 0px;
  padding-bottom: 1px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 15px;
  font-family: Book Antiqua;
  width: 550px;
  height:500px;
  overflow:auto;
  margin: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="entry">
  <p>paragraph text 1</p>

  <button class="next">Next</button>
</div>


<div class="entry" style="display:none;">
  <p>paragraph text 2</p>
  <button class="back">Back</button>
  <button class="next">Next</button>
</div>


<div class="entry" style="display:none;">
  <p>paragraph text 3</p>
  <button class="back">Back</button>
</div>

0赞 Afzal K. 11/6/2023 #2

普通的 JS 解决方案，因此它不需要使用 jQuery 库。更轻巧、更高效。

var entries = document.querySelectorAll(".entry");
var nextButtons = document.querySelectorAll(".next");
var backButtons = document.querySelectorAll(".back");

nextButtons.forEach(function(button, index) {
  button.addEventListener("click", function() {
    entries[index].style.display = "none";
    entries[index + 1].style.display = "block";
  });
});

backButtons.forEach(function(button, index) {
  button.addEventListener("click", function() {
    entries[index + 1].style.display = "none";
    entries[index].style.display = "block";
  });
});

单击按钮以显示下一个 div？

Clicking a button to show next div?

评论

评论