Javascript：按名称显示/隐藏多个元素

Question

当点击另一个元素时，我需要显示/隐藏多个具有相同名称的元素，例如 <span name="showhide" value="one" id="button">Click to Hide One</span>
<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="two" id="button">Click to Hide Two</span>
<span name="showhide" value="shoe" id="button">Click to Hide shoe</span>
<span name="showhide" value="shoe" id="button">Click to Hide shoe</span>

此外，<span name="showhide" value="one">One</span>不能在HTML中使用，它必须在脚本中。不能将任何属性应用于除href之外的标记（这适用于MediaWiki）

我尝试了一些不同的方法，但我似乎无法让它工作，有人有任何建议吗？

Answer 1

标记无效：没有<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>

Answer 2

在页面加载时，首先向具有该名称的所有元素添加一个事件以切换hide / show。单击元素时，循环遍历所有元素，并根据当前状态将其样式更改为display:none或display:block。要识别当前状态，您可以找到display属性值或添加/删除类。