javascript - 如何使下一个/上一个段落在 div 中可见?
问题描述
我在 a 中有四个段落div
,第一个孩子(或者更确切地说是第一段)是可见的。此外,我有两个按钮(“下一个”和“上一个”),当单击按钮时,我必须隐藏当前段落并显示下一个/上一个段落。
我试图编写一个实现这个目标的函数,但它似乎没有工作。它不会隐藏当前段落,也不会显示下一个/上一个兄弟。
这是一个例子:
var show = function(elem) {
elem.style.display = 'block';
};
var hide = function(elem) {
elem.style.display = 'none';
}
var toggle = function(elem, next) {
if (window.getComputedStyle(elem).display === 'block') {
hide(elem);
show(next);
return;
}
};
var count = 0;
document.addEventListener('click', function(event) {
if (!event.target.classList.contains('toggle')) return;
event.preventDefault();
var e = document.getElementById("bal");
var content = e.childNodes[count];
count++;
var next = content.nextSibling;
if (!content) return;
toggle(content, next);
}, false);
#bal {
width: 48%;
border: 1px solid red;
padding: 1em;
}
#bal p {
display: none;
}
#bal p:nth-child(1) {
display: block;
}
#jobb {
width: 48%;
float: right;
}
<div id="jobb">
<form id="gombok">
<span>
<input type="button" name="previous" value="Previous">
<input type="button" class="toggle" href="#bal" name="next" value="Next">
</span>
</form>
</div>
<div id="bal" class="sib">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
</div>
此功能无法识别当前段落,如果我在“下一步”按钮上单击两次,它会删除第一段的文本。
解决方案
@dbramwell有一个有价值的解释为什么你的代码不起作用:
- 使用 childNodes 而不是孩子。当您尝试在它们上设置样式时,您需要使用子元素而不是节点来获取元素。见这里。
if(!content) return;
,您需要检查“下一个”是否存在,而不是内容,因为当下一个不存在时,最后一段内容将存在
并更正了您的功能:
var show = function (elem){
elem.style.display = 'block';
};
var hide = function (elem){
elem.style.display = 'none';
}
var toggle = function(elem, next){
if (window.getComputedStyle(elem).display === 'block'){
hide(elem);
show(next);
return;
}
};
var count = 0;
document.addEventListener('click', function(event){
if (!event.target.classList.contains('toggle')) return;
event.preventDefault();
var e = document.getElementById("bal");
var content = e.children[count];
count++;
var next = e.children[count];
if(!next) return;
toggle(content, next);
}, false);
<!DOCTYPE html>
<html lang="hu">
<head>
<title>JS példák</title>
<meta charset="utf-8">
<meta name="description" content="JavaScript példák">
<script src="utils.js"></script>
<script src="./view_para.js"></script>
<style type="text/css">
#bal {
width: 48%;
border: 1px solid red;
padding: 1em;
}
#bal p {
display: none;
}
#bal p:nth-child(1) {
display: block;
}
#jobb {
width: 48%;
float: right;
}
</style>
</head>
<body>
<div id="jobb">
<form id="gombok">
<span>
<input type="button" name="previous" value="Előző">
<input type="button" class="toggle" href="#bal" name="next" value="Következő">
</span>
</form>
</div>
<div id="bal" class="sib">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
semper felis in nunc tincidunt lacinia. Aenean interdum,
lorem pretium maximus euismod, dolor tellus porta velit, sed
dapibus ex velit non ante. Morbi consequat rhoncus
erat, a laoreet felis commodo eget. Phasellus sed justo nibh.
Quisque ut felis malesuada, dictum erat vel, vehicula
nunc. Sed quis facilisis enim. Sed non magna nisl. Duis
pellentesque tempus mollis.</p>
<p>In ultrices mauris risus, ac blandit arcu vehicula vel. Mauris in
nulla nulla. Praesent dignissim justo at lorem
tempus molestie. Nunc interdum, justo non iaculis mollis, quam
ipsum mollis massa, id dignissim odio purus quis
ex. Ut a odio venenatis, malesuada diam et, blandit magna. Nam
scelerisque purus ut risus interdum, et vehicula
augue vestibulum. Proin mattis vehicula arcu, sit amet suscipit
velit malesuada sed. In hac habitasse platea
dictumst. Ut non laoreet dolor. Nunc pellentesque nulla at justo
maximus dignissim. </p>
<p>ellentesque convallis sapien eget tortor fermentum, nec consequat
lacus interdum. Sed id pulvinar risus, eu ornare
tellus. Morbi non ex magna. Nunc sed massa id dolor ultrices
consequat. Curabitur fermentum nibh quis sollicitudin
condimentum. Integer a quam vitae quam fringilla consectetur.
Donec vehicula, risus sed sagittis condimentum,
risus neque luctus mauris, accumsan consectetur lectus nisi id
tellus. Quisque eu sapien non lectus imperdiet
tincidunt consequat non metus. Nulla egestas iaculis arcu sed
elementum. Praesent pellentesque sem purus. Nulla
hendrerit leo lacus, sit amet sodales ante porttitor at. Fusce
dapibus laoreet dui, sit amet ornare odio mollis
non. In hac habitasse platea dictumst. Praesent non ex at nunc
ullamcorper interdum. </p>
<p>Duis tortor leo, ultricies quis placerat vel, scelerisque eu
augue. Duis est odio, interdum sit amet ullamcorper
eget, tincidunt et lectus. Aliquam erat volutpat. Donec tempus
porttitor consectetur. Pellentesque ac enim vestibulum,
eleifend arcu et, hendrerit ligula. Sed quis magna metus.
Quisque dignissim metus eget iaculis commodo.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus.
Vestibulum et est gravida, mattis arcu sed, ultricies
elit. Sed vitae nisi ac lacus tincidunt varius et eu augue.
Etiam ultrices nunc vitae lacinia sagittis. Curabitur
molestie ac tellus non porttitor. Suspendisse potenti. Praesent
facilisis semper iaculis. Sed justo enim, imperdiet
vitae aliquet id, tempor ut orci. Nunc sed risus arcu. In
imperdiet dui eget erat elementum egestas. Pellentesque
eget urna vitae nulla dapibus euismod. Curabitur nisl diam,
pretium id mi posuere, molestie gravida justo. </p>
</div>
但是,这不是您应该为这样的简单任务设计代码的方式。我写了一个更简单的函数,它应该同样出色地完成任务。
var count = 0;
function bla() {
var num = document.querySelectorAll("div#bal p").length - 1;
if(count < 0) {
count = num;
} else if (count > num) {
count = 0;
}
var all = document.querySelectorAll("div p");
for (var i = 0; i < all.length; i++) {
all[i].style.display = "none";
}
document.querySelectorAll("div p")[count].style.display = "block";
}
div > p {
display: none;
}
div > p:first-child {
display: block;
}
<div>
<p>P1</p>
<p>P2</p>
<p>P3</p>
<p>P4</p>
</div>
<button onclick="bla(count++);">Next</button>
<button onclick="bla(count--);">Previous</button>
即使使用您的(未缩短的)示例,这也很容易实现。
var count = 0;
function bla() {
var num = document.querySelectorAll("div#bal p").length - 1;
if (count < 0) {
count = num;
} else if (count > num) {
count = 0;
}
var all = document.querySelectorAll("div#bal p");
for (var i = 0; i < all.length; i++) {
all[i].style.display = "none";
}
document.querySelectorAll("div#bal p")[count].style.display = "block";
}
#bal {
width: 48%;
border: 1px solid red;
padding: 1em;
}
#bal p {
display: none;
}
#bal p:nth-child(1) {
display: block;
}
#jobb {
width: 48%;
float: right;
}
<div id="jobb">
<form id="gombok">
<span>
<input type="button" onclick="bla(count--)" name="previous" value="Előző">
<input type="button" onclick="bla(count++)" class="toggle" href="#bal" name="next" value="Következő">
</span>
</form>
</div>
<div id="bal" class="sib">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper felis in nunc tincidunt lacinia. Aenean interdum, lorem pretium maximus euismod, dolor tellus porta velit, sed dapibus ex velit non ante. Morbi consequat rhoncus erat, a laoreet felis
commodo eget. Phasellus sed justo nibh. Quisque ut felis malesuada, dictum erat vel, vehicula nunc. Sed quis facilisis enim. Sed non magna nisl. Duis pellentesque tempus mollis.</p>
<p>In ultrices mauris risus, ac blandit arcu vehicula vel. Mauris in nulla nulla. Praesent dignissim justo at lorem tempus molestie. Nunc interdum, justo non iaculis mollis, quam ipsum mollis massa, id dignissim odio purus quis ex. Ut a odio venenatis,
malesuada diam et, blandit magna. Nam scelerisque purus ut risus interdum, et vehicula augue vestibulum. Proin mattis vehicula arcu, sit amet suscipit velit malesuada sed. In hac habitasse platea dictumst. Ut non laoreet dolor. Nunc pellentesque nulla
at justo maximus dignissim. </p>
<p>ellentesque convallis sapien eget tortor fermentum, nec consequat lacus interdum. Sed id pulvinar risus, eu ornare tellus. Morbi non ex magna. Nunc sed massa id dolor ultrices consequat. Curabitur fermentum nibh quis sollicitudin condimentum. Integer
a quam vitae quam fringilla consectetur. Donec vehicula, risus sed sagittis condimentum, risus neque luctus mauris, accumsan consectetur lectus nisi id tellus. Quisque eu sapien non lectus imperdiet tincidunt consequat non metus. Nulla egestas iaculis
arcu sed elementum. Praesent pellentesque sem purus. Nulla hendrerit leo lacus, sit amet sodales ante porttitor at. Fusce dapibus laoreet dui, sit amet ornare odio mollis non. In hac habitasse platea dictumst. Praesent non ex at nunc ullamcorper interdum.
</p>
<p>Duis tortor leo, ultricies quis placerat vel, scelerisque eu augue. Duis est odio, interdum sit amet ullamcorper eget, tincidunt et lectus. Aliquam erat volutpat. Donec tempus porttitor consectetur. Pellentesque ac enim vestibulum, eleifend arcu et,
hendrerit ligula. Sed quis magna metus. Quisque dignissim metus eget iaculis commodo.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum et est gravida, mattis arcu sed, ultricies elit. Sed vitae nisi ac lacus tincidunt varius et eu augue. Etiam ultrices nunc vitae lacinia sagittis. Curabitur molestie ac tellus
non porttitor. Suspendisse potenti. Praesent facilisis semper iaculis. Sed justo enim, imperdiet vitae aliquet id, tempor ut orci. Nunc sed risus arcu. In imperdiet dui eget erat elementum egestas. Pellentesque eget urna vitae nulla dapibus euismod.
Curabitur nisl diam, pretium id mi posuere, molestie gravida justo. </p>
</div>
推荐阅读
- angular - 角度构建是否包括规格文件大小?
- node.js - 如何在 express js 中授予用户特定的文件访问权限
- javascript - axios 发布请求的标头被视为参数
- excel - VBA - 如何在从原始行复制一些数据时合并 2 列
- web-services - 如何从 .NET Core 动态调用 Web 服务
- c++ - 将指针的地址传递给需要指针的函数有什么意义?
- c# - C# 非泛型类型是未绑定的还是绑定的?
- angular - 即使我可以在控制台中读取数据,通过路由器插座传递给 HomeComponent 的数据也不会呈现
- ios - 如何测试触摸对话框并执行真正的应用内购买?
- traefik - 无法将 Traefik 仪表板重定向到 https 并设置密码