代码仅适用于找到的第一个元素，存在多个具有相同 id 的元素

Code only applies to first elements found, multiple elements with the same id exist

本文关键字：元素 id 适用于 代码 第一个 存在      更新时间：2023-09-26

是否可以将javascript应用于具有相同ID的多个div？目前它只将其应用于第一个找到的，我猜是 [0]。是否可以循环遍历div 并以这种方式应用它？

<body>
        <div id="mainHolder">
            <div id="header">
                <img src="images/collapse1.png" />
            </div>
            <div id="content">
                <p>This is a collapsible panel</p>
                <img src="images/bird.jpg" height="130"/>
            </div>
        </div>
        <div id="panelBelow">
            <p>A panel is placed below the collapsible panel, just to show that when the panel above collapses the panel below is also moved up.</p>
        </div>
        <br></br>
        <div id="mainHolder">
            <div id="header">
                <img src="images/collapse1.png" />
            </div>
            <div id="content">
                <p>This is a collapsible panel</p>
                <img src="images/bird.jpg" height="130"/>
            </div>
        </div>

    </body>
    <script type="text/javascript">
        var header = null;
        var content = null;
        var mainHolder = null;
        var expandCollapseBtn = null;
        var heightValue = 0;
        header = document.getElementById("header");
        content = document.getElementById("content");
        mainHolder = document.getElementById("mainHolder");
        expandCollapseBtn = header.getElementsByTagName('img')[0];
        heightValue = mainHolder.offsetHeight;
        header.addEventListener('click', handleClick, false);
        mainHolder.addEventListener('webkitTransitionEnd',transitionEndHandler,false);
        function handleClick()
        {
            if(expandCollapseBtn.src.search('collapse') !=-1)
            {
                mainHolder.style.height = "30px";
                content.style.display = "none";
            }
            else
            {
                mainHolder.style.height = heightValue + "px";
            }
        }
        function transitionEndHandler()
        {
            if(expandCollapseBtn.src.search('collapse') !=-1)
            {
                expandCollapseBtn.src = "images/expand1.png";
            }
            else{
                expandCollapseBtn.src = "images/collapse1.png";
                content.style.display = "block";
            }
        }
        </script>
像

这样更改mainHolder元素：

<div class="mainHolder">...</div>

然后像这样对每个元素addEventListener s：

var mainHolderElements = getElementsByClassName('mainHolder');
for (var i = 0, length = mainHolderElements.length; i < length; i++) {
    mainHolderElements[i].addEventListener(...);
}

只能有一个元素具有 id。

将您的 id 更改为类，并通过该类选择元素。 如这个答案：https://stackoverflow.com/a/3887663/498699

相关文章：