使用相同的函數打開不同的鏈接JavaScript

Question

我的JS有點問題。我有幾個鏈接相同onclick。 我的問題是點擊鏈接時，第一個onclick顯示。

我的HTML

<li> 
    <a href="#" onclick="openRookie();" class="rookie">John Doe</a> 
    <p class="open"> 
     <a href="#">Portfolio</a> 
     <a href="#">Twitter</a> 
     <a href="#">Dribbble</a> 
    </p> 
</li> 
<li> 
    <a href="#" onclick="openRookie();" class="rookie">John Doe</a> 
    <p class="open"> 
     <a href="#">Portfolio</a> 
     <a href="#">Twitter</a> 
     <a href="#">Dribbble</a> 
    </p> 
</li> 
<li> 
    <a href="#" onclick="openRookie();" class="rookie">John Doe</a> 
    <p class="open"> 
     <a href="#">Portfolio</a> 
     <a href="#">Twitter</a> 
     <a href="#">Dribbble</a> 
    </p> 
</li> 

我的JS

var s = document.getElementsByClassName('open'); 
function openRookie() { 
    for(var i=0; i<s.length; i++) { 
     if (s[i].style.maxHeight !== "20px") { 
      s[i].style.maxHeight = "20px"; 
      s[i].style.marginTop = "10px"; 
     } else { 
      s[i].style.maxHeight = "0"; 
      s[i].style.marginTop = "0"; 
     } 
     return false; 
    } 
} 

感謝您的答覆。

Answer 1

您可以通過定位觸發事件的元素來重複使用相同的功能。然後使用這個元素，你可以得到事件中涉及的不同的html節點。

例如看到這個http://jsfiddle.net/65Xxw/1/

function openRookie(){ 

    // get the anchor which has been clicked. 
    var elm = event.target; 
    // get the parent node which is the li tag 
    var parent = elm.parentNode; 
    // get the child of the li tag which is a paragraph. 
    var paragraphs = parent.getElementsByTagName('p'); 

    // paragraphs is an array. we know there is only one so can just show. 
    paragraphs[0].style.display = "block"; 

    // prevent the link from doing it's natural thing. 
    return false; 

} 

你也可以改變這一點，專門尋找的公開課，如果你結束了與多個<p>標籤<li>

Answer 2

你必須給<p>你想顯示/隱藏一個你可以到達的ID，然後用getElementById代替。該ID應該作爲參數傳遞給該函數。