comment sélectionner l'élément frère lorsque vous cliquez sur un lien?

Question

J'ai des boutons de lien de serval pour montrer un div ci-dessous. Je veux cliqueter un linkbutton et montrer seulement l'élément div au-dessous de celui-ci. mais mon code js:

function showComment(){ 
        var isshow=$(this).attr('isshow'); 
        if(isshow=="0"){ 
         this.$(".comment").show(); 
         $(this).attr('isshow',"1"); 
        } 
        else{ 
         this.$(".comment").hide(); 
         $(this).attr("isshow","0"); 
        } 
       } 

Afficher tout div. et quand j'utilise $ (this) .siblings() ou $ (this) .next(), j'ai obtenu la valeur null, je ne sais pas pourquoi cela ne fonctionne pas.

Que puis-je faire?

Answer 1

this ne pointe pas vers l'élément si vous l'exécutez dans un événement en ligne. Effectuez les opérations suivantes:

onclick="showComment(this)" 

Et:

  function showComment(el) { 
       var isshow=$(el).attr('isshow'); 
       if(isshow=="0"){ 
        $(el).next(".comment").show(); 
        $(el).attr('isshow',"1"); 
       } 
       else{ 
        $(el).next(".comment").hide(); 
        $(el).attr("isshow","0"); 
       } 
      } 

Ou si vous utilisez click de jQuery, vous pouvez utiliser this pour pointer vers l'élément:

$('.btnComment').click(function(event) { 
    var isshow=$(this).attr('isshow'); 
    if(isshow=="0"){ 
     $(this).next(".comment").show(); 
     $(this).attr('isshow',"1"); 
    } 
    else{ 
     $(this).next(".comment").hide(); 
     $(this).attr("isshow","0"); 
    } 
}); 

Answer 2

Vous devriez envelopper votre <a> et <div> dans un autre <div> pour créer un code plus maintenable. Comme ceci:

<div class="commentContainer"> 
    <a class="btnComment" isshow='0'>{{ post_comments.count }} comment</a> 
    <div class="comment"> 
    .... 
    </div> 
<div> 

Ce div parent sert contexte pour vos mots clés. À l'avenir, si vous modifiez la position, déplacez <a> après <div>, votre code fonctionne toujours correctement. Et vous pouvez même créer un groupe en assignant une classe au conteneur.
Votre jquery, ici j'utilise jquery event handler à la place.

$(".btnComment").click(function() { 
    var isshow = $(this).attr('isshow'); 
    var parent = $(this).closest(".commentContainer"); 
    if (isshow == "0") { 
     parent.find(".comment").show(); 
     $(this).attr('isshow', "1"); 
    } else { 
     parent.find(".comment").hide(); 
     $(this).attr("isshow", "0"); 
    } 
} 

Si vous utilisez .next(), cela signifie que votre code est couplé au html en cours.

Answer 3

css

.hide {visibility: hidden;} { .show visibility: visible;}

jquery

$ ('btnComment.) Cliquable. (function() {
$ ('. btnComment + div'). removeClass ('show'). addClass ('hide'); $ (this) .next(). removeClass ('hide').addClass ('show'); });

html

< a class = "btnComment" href = "javascript :;" sshow = '0' > click1 </a >
< div class = "cacher" > sandy1 </div >
< a class = "btnComment" href = "javascript :;" isshow = '0' > click2 </a >
< div class = "cacher" > sandy2 </div >
< a class = "btnComment" href = "javascript :;" isshow = '0' > click3 </a >
< div class = "cacher" > sandy3 </div >

Sur chaque clic de balise d'ancrage div respectifs seront affichés et d'autres seront cachés. J'espère que cela vous aidera.