J'ai quatre paragraphes dans un div et le premier enfant (ou plutôt le premier paragraphe) est visible. De plus, j'ai deux boutons ("suivant" et "précédent") et lorsque le bouton est cliqué, je dois cacher le paragraphe actuel et afficher le paragraphe suivant / précédent.
J'ai essayé d'écrire une fonction qui accomplit ceci mais cela ne semble pas fonctionner. Il ne masque pas le paragraphe actuel et n'affiche pas le frère suivant / précédent.
Voici un exemple:
<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>
#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;
}
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);
Cette fonction ne reconnaît pas le paragraphe actuel et si je clique deux fois sur le bouton "suivant", elle supprime le texte du premier paragraphe.
3 Réponses :
Je pense que vous rencontrez quelques problèmes.
if (! content) return; , vous devez vérifier si "next" existe, plutôt que le contenu, car sur le dernier paragraphe, le contenu existera alors que le prochain n'existera pas
<!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 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);
À mon avis, ce n'est pas une bonne réponse. Oui, votre correctif fonctionne, mais il devrait être évident que le code d'origine est bien trop compliqué pour une tâche aussi simple et doit être repensé.
C'est actuellement la seule réponse qui explique le problème et propose une solution associée, que je trouve précieuse. Sur le front de la refonte, voici mon point de vue avec les boutons suivant et précédent.
Vous avez un point. Ma solution ne fournit pas d'explication. Je vais le modifier en conséquence et mentionner @dbramwell
Oui, difficile de trouver parfois un équilibre entre expliquer pourquoi le code de la personne ne fonctionne pas, le réparer et donner une bien meilleure façon de le faire. Je suppose que la meilleure réponse est de faire les trois mais cela demande plus d'efforts
J'ai édité ma réponse et je vous ai cité et mentionné. Cela devrait être un bon compromis. Mais depuis que j'ai voté contre il y a 50 minutes, je ne peux plus retirer mon vote négatif ... désolé: /
Ne t'inquiète pas, ce n'est qu'un jeu
@dbramwell explique pourquoi votre code ne fonctionnait pas:
- Utilisation de childNodes plutôt que d'enfants. Lorsque vous essayez de leur définir un style, vous devez utiliser des enfants pour obtenir des éléments plutôt que des nœuds. Voir ici .
if (! content) return;, vous devez vérifier si "next" existe, plutôt que du contenu, car sur le dernier paragraphe, le contenu existera alors que le prochain n'existera pas
et également corrigé votre fonction:
<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>
#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;
}
Cependant, ce n'est pas ainsi que vous devez concevoir votre code pour une tâche facile comme celle-ci. J'ai écrit une fonction beaucoup plus simple qui devrait tout aussi bien faire la tâche.
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";
}
<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>
div > p {
display: none;
}
div > p:first-child {
display: block;
}
Même avec votre exemple (non abrégé), c'est facile à réaliser.
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";
}
<!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 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);
<div id="block"> <p>My first paragraph.</p> <p>My Second paragraph.</p> <p>My Third paragraph.</p> <p>My Fourth paragraph.</p> </div> <button id="prev">Prev</button> <button id="next">Next</button> </div>
#block p:not(:first-child) {
display:none;
}
(function() {
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var block = document.getElementById("block");
var paragraphs = block.getElementsByTagName("p");
var activeParagraphIndex = 0;
var paragraphsCount = paragraphs.length;
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;
}
};
next.addEventListener('click', function(event){
var prev = paragraphs[activeParagraphIndex];
activeParagraphIndex++;
if(activeParagraphIndex === paragraphsCount) {
activeParagraphIndex = 0;
}
var next = paragraphs[activeParagraphIndex];
toggle(prev,next);
}, false);
prev.addEventListener('click', function(event){
var prev = paragraphs[activeParagraphIndex];
activeParagraphIndex--;
if(activeParagraphIndex === -1) {
activeParagraphIndex = paragraphsCount - 1;
}
var next = paragraphs[activeParagraphIndex];
toggle(prev,next);
}, false);
})();
Ce code fonctionne pour n paragraphes. Vous pouvez en ajouter autant que vous le souhaitez.
Veuillez également ajouter la partie HTML.
La prochaine fois, veuillez fournir un exemple abrégé. Nous n'avons pas besoin de vos fichiers JS ou de vos balises meta et pas non plus du modèle HTML de base (,
...). De plus, vous pouvez simplement réduire votre partie "Lorem impsum" à un mot comme "exemple1", "exemple2" et ainsi de suite.