Afficher un élément avec un bouton next ou prev

**pierrot10** · 07/01/2022, 23h45

Bonjour,

Je suis frustrer de poser cette question mais voilà.....

J'ai un enxemble de témoignage que j'aimerais rendre visible avec des flèches > ou <.

Mon code HTML est le suivant:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div id="temoignage-slider">
 
<div data-index="1" class="item" style="display:none;">
	<h3>Maud</h3>
</div>
<div data-index="2" class="item" style="display:none;">
	<h3>Sandrine</h3>
</div>
<div data-index="3" class="item" style="display:none;">
	<h3>Sebastien</h3>
</div>
<div data-index="4" class="item" style="display:none;">
	<h3>Olivier R</h3>
</div>
<div data-index="5" class="item" style="display:none;">
	<h3>Jordi</h3>
</div>
<div data-index="6" class="item" style="display:none;">
	<h3>Fra</h3>
</div>
<div data-index="7" class="item" style="display:none;">
	<h3>Carene</h3>
</div>
 
<div class="nav_temoignages">
  <div class="nav_button" onclick="plusDivs(-1)">&lt;</div>
  <div class="nav_button" onclick="plusDivs(1)">&gt;</div>
</div>
</div>

En premier temps, j'aimerais que si on affiche la page, le data-index=1 soit visible. Puis, avec les bouton < ou > , on affiche le suivant ou le précédent.

J'ai essayé de trouver l'index

Code JQUERY :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$(document).ready(function(){
	console.log($('#temoignage-slider').index());
});

Il m'affiche 7 (après avoir rafraichi la page), soit le dernier, alors j'ai essayé de faire que le dernier soit qui s'affiche, mais sans succès

Code jquery :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function(){
	console.log($('#temoignage-slider').index());
 
	$('#temoignage-slider').each(function(inde){
		console.log(inde);
 
		if($(this).data("index") == 7)
		{
			$(this).show();
		}
	});
	//$('.item').attr("data-index",$('#temoignage-slider').index()).show();
});

Je pense qu'après, je peux déduire ou augmennter l'index et cliquand sur les boutons < et >.

Pourriez-.vous me mettre sur une piste pour faire un truc simple comme cela?

Mercii

**Toufik83** · 08/01/2022, 00h55

Bonjour,

Ajoutes les classes prev et next au boutons comme ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<div class="nav_button prev" >&lt;</div>
<div class="nav_button next" >&gt;</div>

Et utilise ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
$(document).ready(function() {
  //Afficher le premier .item
  $('#temoignage-slider .item').first().show();
  //clic sur .nav_button prev/next
  $('#temoignage-slider .nav_button')
    .click(function() {
      let prev = $(this).parent().siblings('.item:visible').prev('.item'),//elément qui precède .item visible (s'il existe)
        next = $(this).parent().siblings('.item:visible').next('.item');//elément suivant de .item visible (s'il existe)
      $(this).parent().siblings('.item').hide();//masquer tout les .item à chaque clic
      if ($(this).hasClass('prev')) {
        if (prev.length) prev.show();
        else $(this).parent().siblings('.item').last().show();
      } else if ($(this).hasClass('next')) {
        if (next.length) next.show();
        else $(this).parent().siblings('.item').first().show();
      }
    });
});

Remarques

Avec ce code, si le premier .item est déjà affiché et que l'on clic sur précédent , c'est le dernier élément qui sera afficher (ça tourne en boucle,et vice versa), sinon tu peux par exemple désactiver les boutons prev quand le premier .item est affiché et next quand le dernier élément est affiché.
Supprimes l'attribut html "onclick" et utilises plutôt la syntaxe jQuery.

**pierrot10** · 09/01/2022, 00h01

Merci beaucoup toufik et bonne année!!

**pierrot10** · 11/01/2022, 21h36

Hello
Malheureusement, je n'arrive pas à faire fonctionner ce code.

Le next/prev ne fonctionne pas et le console.log

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
console.log("prev:",prev);
console.log("next:",next);

me retourne une valeur de 0

J'ai aussi ajouté ceci

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
#temoignage-slider .item{
    display: none;
}

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
$(document).ready(function(){
//Afficher le premier .item
  $('#temoignage-slider .item').first().show();
  //clic sur .nav_button prev/next
  $('#temoignage-slider .nav_button').click(function() {
  	//alert('1');
 
		let prev = $(this).parent().siblings('.item:visible').prev('.item'),//elément qui precède .item visible (s'il existe)
        	next = $(this).parent().siblings('.item:visible').next('.item');//elément suivant de .item visible (s'il existe)
 
        console.log("prev:",prev);
        console.log("next:",next);
      $(this).parent().siblings('.item').hide();//masquer tout les .item à chaque clic
 
      alert('2');
 
      if ($(this).hasClass('prev')) {
       	if (prev.length)
       	{
       		alert('3');
       		prev.show();
        }
        else
        {
        	alert('4');
        	$(this).parent().siblings('.tem').last().show();
        }
      } else if ($(this).hasClass('next'))
      {
        if (next.length)
        {
        	next.show();
        }
        else
        {
        	alert('5');
        	$(this).parent().siblings('.item').first().show();
      	}
      }
    });
});

J'ai l'impression qu'il n'arrive pas à cibler son élément supérieur...

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<div id="temoignage-slider">
	<div data-index="1" class="item" style="display: block;">
	<h3>Maud</h3>
</div>
<div data-index="2" class="item">
	<h3>Sandrine</h3>
</div>
<div data-index="3" class="item">
	<h3>Sebastien</h3>
</div>
<div data-index="4" class="item">
	<h3>Olivier R</h3>
</div>
<div data-index="5" class="item">
	<h3>Jordi</h3>
</div>
<div data-index="6" class="item">
	<h3>Fra</h3>
</div>
<div data-index="7" class="item">
	<h3>Carene</h3>
</div>
 
<div class="nav_button prev">prev &lt; </div>&nbsp;
<div class="nav_button next">next &gt; </div>
 
</div>

**Toufik83** · 11/01/2022, 21h59

Bonjour,

Dans le premier code HTML, tu as mis les boutons à l'intérieur de <div class="nav_temoignages"></div>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<div class="nav_temoignages">
  <div class="nav_button" >&lt;</div>
  <div class="nav_button" >&gt;</div>
</div>

alors que dans le 2éme code, tu as supprimé ce div, et donc ceci ne fonctionnera pas parce que le code js été adapté à la première structure.

Pour le faire fonctionner avec la deuxième structure, il faut supprimer .parent() de tout les .parent().siblings() pour qu'ils devient seulement .siblings()ou bien remettre les boutons à l'intérieur d'un élément sans toucher au code js.

Remarques :

Décommenter la ligne 14 et la corriger $(this).siblings('.item').hide();//masquer tout les .item à chaque clic
Attention il manque un "i" dans le nom de la classe :$(this).parent().siblings('.tem').last().show(); à la ligne 27 la correction : $(this).siblings('.item').last().show()

**pierrot10** · 11/01/2022, 22h12

Ha oui, ca va vraiment mieux comme cela!!!
Merci beaucoup!!!!!

Afficher un élément avec un bouton next ou prev

jQuery

Vue hybride

Discussions similaires

Partager

Partager