Bonjour,

Je débute en js. Je souhaite faire une chose qui doit sembler simple à bien du monde mais je coince sur un point ! Je fais plusieurs paragraphe dans une div avec un titre h2 puis paragraphe "p". A coté du titre je souhaite mettre deux petits boutons pour faire apparaître et disparaître le paragraphe. Donc j'arrive bien à faire disparaître et réapparaître mais lorsque je clique sur un bouton cela s'execute sur tout les paragraphe car ils ont la même class. Comment sélectionner une seule class lors de l'événement click ?

Exemple de certains paragraphes en html. Pour l'instant, afin de remédier à mon problème, j'ai écris le code js à côté de chaque titre ! mais je souhaite devenir plus performant et avoir la bonne façon de faire et là répéter tout cela alors que, à mon avis, une simple petite fonction suffit !

<div id="txt_services">
                <div class="contain">
                    <div onclick="$('.para:eq(0)').toggle('slow');" class="contain_title">
                      <div class="circle_border"><i onclick="$('.para:eq(0)').toggle('slow');" class="fa fa-plus fa-2x" aria-hidden="true"></i></div>
                      <h2>Des solutions locales durables</h2>
                    </div>
                    <p class="para">Les projets de développement touristique doivent à la fois créer les conditions de développement économique, développer ou maintenir le lien social et préserver les ressources naturelles.</p>
                </div>
                
                <div class="contain">
                    <div onclick="$('.para:eq(1)').toggle('slow');" class="contain_title">
                      <div class="circle_border"><i class="fa fa-plus fa-2x" aria-hidden="true"></i></div>
                      <h2>Des solutions spécifiques, originales et évaluables</h2>
                    </div>
                    <p class="para">Il y a autant de réponses que de territoires, de projets et d’acteurs. La recherche de solutions réellement novatrices fait partie de notre culture d’entreprise.</p>
                </div>
                <div class="contain">
                    <div onclick="$('.para:eq(2)').toggle('slow');" class="contain_title">
                      <div class="circle_border"><i class="fa fa-plus fa-2x" aria-hidden="true"></i></div>
                      <h2>Des solutions construites avec vous</h2>
                    </div>

et le code js que j'avais mis en place au début mais qui fait afficher/cacher tous mes paragraphes lorsque je clique sur n'importe quel boutons !

$(function() {
  	var para = $('.para');
  	$(para).hide();
        ('.cache').hide();	

  	
    $('.affiche').click(function() {
      $(para).show('slow');
      $('.affiche').hide();
      $('.cache').show();
 
    });
    $('.cache').click(function() {
      $(para).hide('slow');
      $('.cache').hide();
      $('.affiche').show();
    })
  });

Voilà, j'espère avoir été assez concis dans mes explications et je vous remercie pour l'aide apporter. J'ai bien essayé de chercher sur le forum mais j'ai pas trouvé, sauf erreur de ma part, de discussions m'apportant une réponse

Salut,

A mon avis il te faudra sélectionner l'élément possédant une classe para par rapport à la position du bouton sur lequel tu cliques. Je m'explique. 

Par exemple si tu as une classe .afficher sur des boutons, dans ta fonction JS, tu vas aller chercher le paragraphe que tu veux montrer/cacher par les liens de parentés. Par exemple si ton bouton et ton paragraphe sont dans le même élément parent, on dit qu'ils sont frère/soeurs (siblings en anglais). En utilisant le mot clé this, qui va correspondre au bouton sur lequel tu a cliqué, tu vas pouvoir aller chercher le paragraphe son frère possédant une certaine classe (para ici) comme ceci :

$('.afficher').click(function() {
  $(this).siblings('.para').show('slow');
 
});

Je t'invite à lire cette section : https://www.w3schools.com/jquery/jquery_traversing.asp (en anglais mais très complète), ou bien plus simplement : cette page du cours openclassrooms

J'espère que j'ai été clair et que je n'ai pas raconté de bêtises

Bon courage et n'hésite pas à revenir vers nous si besoin !

Thombou

EDIT : En effet ici je te propose une solution avec JQuery, à voir si tu veux te lancer dans JQuery ou non...

-
Edité par thombou 16 janvier 2018 à 11:40:37

Salut. Il est possible de faire comme ça.

CSS :

.bt {
	font-size: .5em;
	background: #ddd;
	padding: 5px 10px;
	display: inline;
	margin-left: 10px;
	cursor: pointer;
}
.bt:hover {
	color: #fff;
	background: #333;
}

HTML :

<h2>Section 1</h2><p>Voici un paragraphe.</p><h2>Section 2</h2><p>Voici un autre paragraphe.</p><h2>Section 3</h2><p>Dernier paragraphe.</p>

JS (ES6) :

for (let h2 of [... document.querySelectorAll('h2')]) {
	const bt = document.createElement('div')
	bt.innerHTML = 'Masquer'
	bt.classList.add('bt')
	bt.addEventListener('click', function() {
		if (this.innerHTML === 'Masquer') {
			h2.nextSibling.style.display = 'none'
			this.innerHTML = 'Afficher'
		} else {
			h2.nextSibling.style.display = 'block'
			this.innerHTML = 'Masquer'
		}
	}, false)
	h2.appendChild(bt)
}

C'est le plus simple. Pas besoin de jQuery pour ça (pour rien d'ailleurs).

Salut ! Merci à vous deux pour la rapidité de vos réponses . Je teste cela et je vous redis 

(suite)

thombou a écrit:

Salut,

A mon avis il te faudra sélectionner l'élément possédant une classe para par rapport à la position du bouton sur lequel tu cliques. Je m'explique. 

Par exemple si tu as une classe .afficher sur des boutons, dans ta fonction JS, tu vas aller chercher le paragraphe que tu veux montrer/cacher par les liens de parentés. Par exemple si ton bouton et ton paragraphe sont dans le même élément parent, on dit qu'ils sont frère/soeurs (siblings en anglais). En utilisant le mot clé this, qui va correspondre au bouton sur lequel tu a cliqué, tu vas pouvoir aller chercher le paragraphe son frère possédant une certaine classe (para ici) comme ceci :

$('.afficher').click(function() {
  $(this).siblings('.para').show('slow');
 
});

Je t'invite à lire cette section : https://www.w3schools.com/jquery/jquery_traversing.asp (en anglais mais très complète), ou bien plus simplement : cette page du cours openclassrooms

J'espère que j'ai été clair et que je n'ai pas raconté de bêtises

Bon courage et n'hésite pas à revenir vers nous si besoin ! 

Thombou

EDIT : En effet ici je te propose une solution avec JQuery, à voir si tu veux te lancer dans JQuery ou non...

-
Edité par thombou il y a environ 5 heures

Bonjour,

Je n'ai pas réussi à faire fonctionner ta solution dsl !! alors, après plusieurs essais, j'ai entré ce code là ! et ça fonctionne bien

$(function() {
  	var para = $('.para');
  	var afficher = $(".afficher");
  	var cacher = $(".cacher");

  	$(para).hide();
  	$(cacher).hide();
  	$(afficher).show();
  	

    $(afficher).click(function() {
  	 	var index = $(".afficher").index(this);
  	 	console.log(index);
  	 	console.log(para[index]);
  	 	$(para[index]).show('slow');
  	 	$(this).hide();
  	 	$(cacher[index]).show();

});

    
    $(cacher).click(function() {
    	var index = $(".cacher").index(this);
      	$(para[index]).hide('slow');
      	$(this).hide();
      	$(afficher[index]).show();
    });
  });

Merci à vous

-
Edité par DataFlo 16 janvier 2018 à 16:53:00