javascript - 如何避免崩溃 Action 多次触发

Question

我想在单击折叠时更改文本并显示/隐藏带有类的svg图标。

每次我执行上面的代码时，代码都会再执行一次，我不知道为什么，

示例:

1st time = `alert(show)`
2nd time = `alert(hide), alert(hide)`
3er time = `alert(show), alert(show), alert(show)`
etc...

这是我的代码:

$('span[name="serviceCollapse"]').click(function() {
        var target = $(this).attr("data-target");
        var label = $(this).find("label");
        var span = $(this);


        $(target).on('hide.bs.collapse', function () {
            label.text("Mostrar más servicios ");
            alert("hide");
            var arrowUp = span.find(".d-inline");
            var arrowDown = span.find(".d-none");

            arrowUp.removeClass("d-inline");
            arrowUp.addClass("d-none");

            arrowDown.removeClass("d-none");
            arrowDown.addClass("d-inline");
        });

        $(target).on('show.bs.collapse', function () {
            label.text("Mostrar menos servicios ");
            alert("show");
            var arrowDown = span.find(".d-inline");
            var arrowUp = span.find(".d-none");

            arrowDown.removeClass("d-inline");
            arrowDown.addClass("d-none");

            arrowUp.addClass("d-inline");
            arrowUp.removeClass("d-none");
        });
    }); 

编辑:

这是html代码:

<div class="col-12 mt-2">
 <span name="serviceCollapse" data-target="#service1" data-toggle="collapse">
  <label class="text-custom-primary bold-300">Mostrar más servicios </label>
  <span class="d-inline">arrowDownSvgIcon</span>
  <span class="d-none">arrowUpSvgIcon</span>
 </span>

 <div id="service1" class="collapse mt-3">
  collapsable
 </div>         
</div>

Answer 1

实际上，根据您的代码，您正在添加多个事件处理程序，而您只需最初在监听器上添加事件处理程序一次即可。每次发生点击时，都会在导致问题的事件监听器上附加更多处理程序。