如何将事件监听器添加到多个带有循环的按钮并相应地隐藏多个元素？

-1

嗨，大家好任何人都可以告诉一些想法添加事件监听器到这些按钮与循环，我想隐藏第一段如果第一个按钮被点击和第二段如果第二个按钮被点击。如何做到这一点我试图做到这一点，但不能得到任何想法做到这一点。请帮助我！谢谢。如何将事件监听器添加到多个带有循环的按钮并相应地隐藏多个元素？

<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>

来源

2017-09-06 janaravi

您可以指定ID的不同div，然后使用id的值作为类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>

来源

2017-09-06 03:38:15

如何将事件监听器添加到多个带有循环的按钮并相应地隐藏多个元素？

回答

相关问题