的Javascript：顯示/隱藏的名字

Question

多個元素，我需要顯示/隱藏與被點擊另一個元素時多個同名的元素，如 <span name="showhide" value="one" id="button">Click to Hide One</span>
<span name="showhide" value="two" id="button">Click to Hide Two</span>
<span name="showhide" value="shoe" id="button">Click to Hide shoe</span>
會隱藏與元素點擊時對應的值
<span name="showhide" value="one">One</span>
<span name="showhide" value="two">Two</span>
<span name="showhide" value="shoe">shoe</span>

此外，onclick=''不能在HTML中使用，它必須在腳本中去。不能將任何屬性應用到href以外的標籤（這是爲MediaWiki）

我試過了一堆不同的方法，但我似乎無法得到它的工作，有沒有人有任何建議？

Answer 1

在頁面加載時，首先將一個事件添加到所有具有該名稱的元素以切換hide/show。單擊某個元素時，循環遍歷所有元素，並根據當前狀態將其樣式更改爲display:none或display:block。要識別當前狀態，您可以找到display屬性值或添加/刪除類。

Answer 2

該標記無效：沒有<span name>或<span value>這樣的屬性，並且不能有多個元素具有相同的id。所有這些都可能會混淆您通過名稱或ID獲取元素的任何嘗試。改爲使用class，並且由於您擁有的是指向頁面其他部分的鏈接，因此將它們標記爲內部鏈接似乎是明智的。您始終可以將它們設計成不像使用CSS的鏈接。

<a class="showhide" href="#one">Click to hide one</a> 
<a class="showhide" href="#two">Click to hide two</a> 

<div id="one">One</div> 
<div id="two">Two</div> 

<script type="text/javascript"> 
    for (var i= document.links.length; i-->0;) { 
     var link= document.links[i]; 
     if (link.className=='showhide') { 
      var div= document.getElementById(link.hash.substring(1)); 
      Toggler(link, div, true); 
     } 
    } 

    function Toggler(toggler, togglee, state) { 
     toggler.onclick= function() { 
      state= !state; 
      togglee.style.display= state? 'block' : 'none'; 
      return false; 
     } 
    } 
</script>