javascript - jQuery 在 Rails 中执行 if-else 语句的两个分支

Question

我在 Rails 页面上有以下 jQuery:

$(document).on('click','.reportsArrow', function() {
    if ( $(this).parent().hasClass('reportCollapsed') ) {
      console.log("A");
      $(this).parent().removeClass('reportCollapsed');
    }else{
      $(this).parent().addClass('reportCollapsed');
        console.log("B");
    }
});

当我点击带有 reportsArrow 而没有 reportCollapsed 的元素时，日志显示

B

A

意味着它正在执行 else 部分，然后执行 if 部分。我希望函数每次点击只执行一次，并且只遵循一个代码路径。为什么它被执行两次，我该如何停止？我应该指出，这在网页设计师创建的模型中正确切换(仅限 HTML/CSS/JS)。看起来问题与 Rails 相关。

编辑:

我们找到了一个可行的解决方案:

$('.reportsArrow').click(function() {
    $(this).parent().toggleClass('reportCollapsed');
}); 

Answer 1

该事件将被多次触发并在 DOM 树中向上传播。使用 event.stopPropagation() .您还可以使用 toggleClass而不是分支。

$(document).on('click','.commonClass', function(event) {
   event.stopPropagation();
   $(this).parent().toggleClass('newClass');
});