Javascript document.GetElementsByCassName上的onclick事件已同时应用于所有元素

请帮忙。我试图阻止播放按钮上的点击事件同时应用于所有div。我希望click事件仅应用于已单击的div。请参阅下面的代码，了解到目前为止我所拥有的。我使用的是香草Javascript

 <style>
                div{
                    width: 200px;
                    height: 200px;
                    border: 1px solid black;
                }
                .secondview{
                    background-color: blue;
                }
                .firstview{
                    visibility: hidden;
                    background-color: red; 
                }
        </style>
        <div class="secondview">
            <button class="play"> Play </button>
            <div class="firstview"> 
                <p>Play this game </p> 
                <button id="submit"> Submit </button>
            </div>
        </div>
        <div class="secondview">
            <button id="btn" class="play"> Play </button>
            <div class="firstview"> 
                <p>Play this game </p> 
                <button id="submit"> Submit </button>
            </div>
        </div>
        <div class="secondview">
            <button class="play"> Play </button>
             <div class="firstview"> 
                <p>Play this game </p> 
                <button id="submit"> Submit </button>
            </div>
        </div>  
    <script>
        var playBtn = document.getElementsByClassName("play");
            for (var i=0; i<playBtn.length; i++){
                playBtn[i].addEventListener("click", showQuestion)
            }
        var question = document.getElementsByClassName("firstview");
            function showQuestion (){
                for(j=0; j<question.length; j++){
                    question[j].style.visibility = "visible";
                }
            }
    </script>

---

在不需要回调click-question变量之前，您不需要遍历firstview

对于每个单击事件，需要获取与单击的按钮相关的firstview元素

这是一个示例代码，用于增强此代码并验证每个步骤的null/undefine

function showQuestion (el){
  var view =  el.target.parentElement.getElementsByClassName("firstview")[0];
        view.style.visibility = "visible";
}

---

我正在试图阻止播放按钮上的点击事件同时应用于所有div我不明白这里的问题是你使用同一个类并触发该类的事件，这就是为什么它会发生。他的问题不同。您不是使用类触发事件，而是将事件分配给元素。此外，不同的class/id for know结构可能会导致性能问题和不必要的复杂性。当然，如果您想更好地区分VIE，应该以逻辑方式放置id\class，并以最确定的方式将事件侦听器附加到它。