如何點擊鏈接時選擇同胞元素？

我有serval鏈接按鈕爲了顯示它下面的div。如何點擊鏈接時選擇同胞元素？

<a class="btnComment" onclick="showComment()" isshow='0'>{{ post_comments.count }} comment</a> 
<div class="comment"> 
.... 
</div> 
<a class="btnComment" onclick="showComment()" isshow='0'>{{ post_comments.count }} comment</a> 
<div class="comment"> 
.... 
</div> 
<a class="btnComment" onclick="showComment()" isshow='0'>{{ post_comments.count }} comment</a> 
<div class="comment"> 
.... 
</div>

我想碰一個linkbutton，只顯示它下面的div元素。但我的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"); 
        } 
       }

此顯示所有div。當我使用$（this）.siblings（）或$（this）.next（）時，我得到了null，我不知道爲什麼不起作用。

我該怎麼辦？

來源

2013-08-18 Jack Zhang

請上傳您的代碼到http://www.jsFiddle.net – Itay

this如果您在內聯事件中運行它，它並不指向元素。請嘗試以下操作：

onclick="showComment(this)"

和：

  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"); 
       } 
      }

或者，如果你使用jQuery的click，您可以使用this指向元素：

$('.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"); 
    } 
});

來源

2013-08-18 08:51:03 sroes

或者他可以簡單地使用event.target – Itay

你應該換你<a>和<div>另一個<div>創建一個更可維護的代碼。就像這樣：

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

這位家長的div作爲背景您的標籤。在將來，如果您更改了位置，請在<div>之後移動<a>，您的代碼仍然正常工作。甚至可以通過爲容器分配一個類來將它作爲一個組進行設置。
你的jQuery，我在這裏使用jQuery事件處理程序。

$(".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"); 
    } 
}

如果使用.next()，這意味着你的代碼耦合到當前HTML。

來源

2013-08-18 08:53:00

這正是我們的element.siblings（「div」） – Itay

@Itay：如果將來會發生什麼，我們有更深的層次？ –

@Itay：這裏的想法是爲每個組創建一個容器，因此它們彼此分開。 –

CSS

.hide {能見度：隱藏;} .show {能見度：可見;}

jQuery的

$（ 'btnComment。'）點擊。（'function'（）{
$（'。btnComment + div'）。removeClass（'show'）。addClass（'hide'）; $（this）.next（）。removeClass（'hide'）。addClass（ '節目'）; }）;

HTML

<一類= 「btnComment」 HREF = 「JavaScript的:;」 sshow = '0' > CLICK1 < /一個>
< DIV 類= 「隱藏」 > sandy1 < /格>
<一類= 「btnComment」 HREF = 「JavaScript的:;」 isshow = '0' > CLICK2 < /一個>
< DIV 類= 「隱藏」 > sandy2 < /格>
<一類= 「btnComment」 HREF = 「JavaScript的:;」 isshow = '0' > CLICK3 </A >
< DIV 類= 「隱藏」 > sandy3 </DIV >

在錨標記相應的DIV的每一次點擊會顯示和其他人將被隱藏。希望這會幫助你。

來源

2013-08-18 09:44:11 Sandeep

如何點擊鏈接時選擇同胞元素？

回答

相關問題