javascript - 同一页面中的多个基本滑动切换不起作用

Question

我使用此代码进行切换:

    <script language="javascript"> 
function toggle() {
    var ele = document.getElementById("toggleText");
    var text = document.getElementById("displayText");
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "show";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "hide";
    }
} 
</script>

<a id="displayText" href="javascript:toggle();">show</a> 
<div id="toggleText" style="display: none"><h1>OPEN</h1></div>

我尝试在我网站上的同一篇文章中多次使用此切换按钮，但它不起作用。我不使用 jQuery，而只使用 javascript。我如何才能在同一篇文章中多次使用此切换开关而不会发生冲突？

Answer 1

仅仅添加一个数字是不够的。为了使 toggle() 函数适用于不同的元素，您必须向该函数提供有关它们的信息:

<script type="text/javascript"> 
function toggle(id, link) {
    var elem = document.getElementById(id);
    var text = document.getElementById(link);
    if (elem.style.display != "none") {
        elem.style.display = "none";
        text.innerHTML = "show";
    } else {
        elem.style.display = "block";
        text.innerHTML = "hide";
    }
} 
</script>

<ul>
    <li>
        <a id="displayText" href="javascript:toggle('toggleText', 'displayText');">hide</a> 
        <div id="toggleText" style="display: block"><h1>OPEN</h1></div>
    </li>
    <li>
        <a id="toggler2" href="javascript:toggle('secondText', 'toggler2');">show</a> 
        <div id="secondText" style="display: none"><h1>OPEN</h1></div>
    </li>
</ul>