javascript - document.getElementsByClassName 上的 onclick 事件同时应用于所有元素

Question

请帮忙。我试图阻止播放按钮上的点击事件同时应用于所有 div。我希望点击事件只应用于被点击的 div。请参阅下面的代码了解我目前所拥有的。我正在使用 Vanilla 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>

Answer 1

您不需要在点击回调之前遍历“firstview”(不需要问题变量)。

您需要为每个点击事件获取与点击的按钮相关的“firstview”元素。

这是一个示例代码(增强此代码并为每个步骤验证 null/undefine)

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