如何将事件侦听器添加到带有循环的许多按钮中，并相应地隐藏多元元素

嗨，大家好，任何人都可以告诉一些想法将事件侦听器添加到以下按钮的循环中，如果单击第一个按钮，我想隐藏第1段，如果单击第二个按钮，则第2 para。如何做到这一点，我正在尝试做，但不能得到任何想法来做到。请帮助我！谢谢。

<body>
    <button class="btn">click1</button>
    <button class="btn">click2</button>
    <button class="btn">click3</button>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, veritatis.</p>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, tempore?</p>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, nisi!</p>
    <script>
        (function() {
            var btn = document.getElementsByClassName("btn");
            var r = document.getElementsByClassName("para");
            for (var i = 0; i < btn.length; i++) {
                for (var e = 0; e < r.length; r++) {
                    btn[i].addEventListener("click", function() {
                            r[e].style.display = "none";
                        })
                    }
                }
        })();
    </script>
</body>

您可以将ID分配给其他div，然后将ID值用作p标签的类属性。在不分配唯一标识符的情况下，将很难知道要隐藏哪个p标签。

window.onload = function() { onLoad(); }
function onLoad() {
    var btn = document.querySelectorAll(".btn");
    for (var i = 0; i < btn.length; i++) {
        btn[i].addEventListener("click", function () {
            document.querySelector("." + this.id).style.display = "none";
        })
    }
}

<button class="btn" id="click1">click1</button>
<button class="btn" id="click2">click2</button>
<button class="btn" id="click3">click3</button>
<p class="click1">Click 1 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, veritatis.</p>
<p class="click2">Click 2 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, tempore?</p>
<p class="click3">Click 3 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, nisi!</p>

相关内容

最新更新

热门标签：