Supposons que j'ai trois paragraphes avec le nom de classe p1,p2 et p3 Et trois div avec le nom de classe div1, div2 et div3. Tous les div sont masqués. Maintenant, pendant que je clique sur la classe p1, seul div1 est affiché et en cliquant sur la classe p2, div1 ferme et div2 s'affiche.

Mais dans mon code en cliquant sur p1 ou p2 ou p3 tous les div(div1, div2, div3) sont affichés.

css

.ask_btn_paragraph
{display : none;}

html

<p class="ask_btn"><span>&#43;</span>This is first paragraph</p>
<div class="ask_btn_paragraph">1stHello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjnHello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn</div>
<p class="ask_btn"><b><span>&#43;</span>This is second paragraph</b></p>
<div class="ask_btn_paragraph">2ndHello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn Hello This issndnknskjnskjnHello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn</div>
<p class="ask_btn"><b><span>&#43;</span>This is third paragraph</b></p>
<div class="ask_btn_paragraph">3rdHello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn Hello This issndnknskjnskjnHello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn</div>

script

$('.ask_btn').click(function () {
        $(".ask_btn_paragraph").toggle();
 })

Où est le problème ? Quelqu'un m'aide s'il vous plait....

-1
Raff 16 mars 2019 à 11:37

2 réponses

Meilleure réponse

Parce que $(".ask_btn_paragraph") sélectionnera chacun tous les p avec la classe .ask_btn_paragraph et les masquera. Vous devriez

  • masquer tous les '.ask_btn_paragraph' en utilisant .hide()
  • Obtenez l'élément suivant à l'élément cliqué en utilisant next()
  • Ensuite, vérifiez la visibilité de l'élément en utilisant is(':visible')
  • Et puis show() si c'est caché.
$('.ask_btn').click(function(){
  let x = $(this).next();
  let hidden = !x.is(':visible')
  $('.ask_btn_paragraph').hide();
  if(hidden) x.show();
})
.ask_btn_paragraph
{display : none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="ask_btn"><span>&#43;</span>This is first paragraph</p>
<div class="ask_btn_paragraph">1stHello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjnHello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn</div>
<p class="ask_btn"><b><span>&#43;</span>This is second paragraph</b></p>
<div class="ask_btn_paragraph">2ndHello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn Hello This issndnknskjnskjnHello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn</div>
<p class="ask_btn"><b><span>&#43;</span>This is third paragraph</b></p>
<div class="ask_btn_paragraph">3rdHello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn Hello This issndnknskjnskjnHello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn</div>
2
Maheer Ali 16 mars 2019 à 09:05
$("div").hide()
$("p").on("click",function(){
    var attr = $(this).attr('id').match(/(\d+)/)[1];
    $("div").hide()
    $("#div"+attr).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id=p1>Parargraph1</p>
<div id=div1>Division 1</div>
<p id=p2>Parargraph2</p>
<div id=div2>Division 2</div>
<p id=p3>Parargraph3</p>
<div id=div3>Division 3</div>
1
Aishwarya 16 mars 2019 à 08:52