Javascript 点击功能在第一次点击时不起作用

Question

我创建了一个函数，可以在单击时添加活动类，其工作正常，但它不会在第一次单击时添加活动类，第二次单击则开始工作正常。这是我的代码

  function howAppWorks($imgUrl, $myClass, event) {
                document.getElementById('myImage').src = $imgUrl;
                document.getElementById("howTheAppContent").classList.remove('addEvent', 'fillTheForm', 'rrtFlowSheet');
                document.getElementById("howTheAppContent").classList.add($myClass);
    
                // Add active class to the current button (highlight it)
                var header = document.getElementById("appWorksList");
                var btns = header.getElementsByClassName("custom-class");
    
                for (var i = 0; i < btns.length; i++) {
                    btns[i].addEventListener("click", function() {
                        var current = document.getElementsByClassName("active");
                        current[0].className = current[0].className.replace(" active", "");
                        this.className += " active";
                    });
                }
    
            }

<div class="row">
        <div class="col-md-6">
            <div class="content">
                <div class="howTheAppWorksContent addEvent" id="howTheAppContent">
                    <img id="myImage" src="http://localhost/projects/rrs-website/wp-content/uploads/2021/11/how-the-app-works.png" alt="">
                </div>
            </div>
        </div>
        <div class="col-md-6" id="appWorksList">
            <table>
                <tr class='custom-class active' id="addEvent" onclick="howAppWorks('http:\/\/localhost/projects/rrs-website/wp-content/uploads/2021/11/how-the-app-works.png', 'addEvent')">
                    <td>1</td>
                </tr>
                <tr class='custom-class' onclick="howAppWorks('http:\/\/localhost/projects/rrs-website/wp-content/uploads/2021/11/fill-the-forms.png', 'fillTheForm')">
                    <td>2</td>
                </tr>
                <tr class='custom-class' onclick="howAppWorks('http:\/\/localhost/projects/rrs-website/wp-content/uploads/2021/11/rrt-flow-sheet.png', 'rrtFlowSheet')">
                    <td>3</td>
                </tr>
            </table>
        </div>
    </div>

Answer 1

问题出在你的逻辑上。您正在调用 an onclick，然后在onclick同一个 上注册一个事件buttons。最好只做一件事，或者干脆取出函数event listener外面howAppWorks。像这样：

function howAppWorks($imgUrl, $myClass, event) {
  document.getElementById('myImage').src = $imgUrl;
  document.getElementById("howTheAppContent").classList.remove('addEvent', 'fillTheForm', 'rrtFlowSheet');
  document.getElementById("howTheAppContent").classList.add($myClass);

  // Add active class to the current button (highlight it)


}
var header = document.getElementById("appWorksList");
var btns = header.getElementsByClassName("custom-class");

for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

.active {
  background: blue;
}

<div class="row">
  <div class="col-md-6">
    <div class="content">
      <div class="howTheAppWorksContent addEvent" id="howTheAppContent">
        <img id="myImage" src="http://localhost/projects/rrs-website/wp-content/uploads/2021/11/how-the-app-works.png" alt="">
      </div>
    </div>
  </div>
  <div class="col-md-6" id="appWorksList">
    <table>
      <tr class='custom-class active' id="addEvent" onclick="howAppWorks('http:\/\/localhost/projects/rrs-website/wp-content/uploads/2021/11/how-the-app-works.png', 'addEvent')">
        <td>1</td>
      </tr>
      <tr class='custom-class' onclick="howAppWorks('http:\/\/localhost/projects/rrs-website/wp-content/uploads/2021/11/fill-the-forms.png', 'fillTheForm')">
        <td>2</td>
      </tr>
      <tr class='custom-class' onclick="howAppWorks('http:\/\/localhost/projects/rrs-website/wp-content/uploads/2021/11/rrt-flow-sheet.png', 'rrtFlowSheet')">
        <td>3</td>
      </tr>
    </table>
  </div>
</div>

工作小提琴