如何避免崩溃动作多次触发
[英]How to avoid collapse actions trigger multiple times
问题描述
I want to change a text and show/hidde an svg icon with classes when click on collapse. 
单击折叠时，我想更改文本并show/hidde带有类的svg icon 。
Every time I execute the code above the code executes one more time and I don't know why, 每当我执行上面的代码时，代码就会执行一次以上，但我不知道为什么，
example: 例：
1st time = `alert(show)`
2nd time = `alert(hide), alert(hide)`
3er time = `alert(show), alert(show), alert(show)`
etc...
here is my code: 这是我的代码：
$('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");
});
});
EDIT: 编辑：
Here is the html code: 这是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>
2 个解决方案
解决方案1
2 2019-08-01 08:28:53
Actually as per your code you are adding multiple event handlers instead you just need to add event handlers on listeners once initially and that would be it. 实际上，根据您的代码，您将添加多个事件处理程序，而您只需要在最初的监听器上添加一次事件处理程序即可。 Every time click is happening more handlers are appended on the event listeners that's causing the problem. 每次发生单击时，都会在导致问题的事件侦听器上附加更多处理程序。
解决方案2
1 已采纳 2019-08-01 08:58:33
SOLUTION: 解：
Set the event handler only once. 仅将事件处理程序设置一次。 And in the click event of 'serviceCollapse' check for its state to print the alert message. 并在“ serviceCollapse”的单击事件中检查其状态以打印警报消息。
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </head> <body> <div class="col-12 mt-2"> <span class="collapsed" 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> <script> $(document).ready(function() { var target = $('span[name="serviceCollapse"]').attr("data-target"); $(target).on('hide.bs.collapse', function () { var label = $(this).find("label"); var span = $(this); label.text("Mostrar más servicios "); 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 () { var label = $(this).find("label"); var span = $(this); label.text("Mostrar menos servicios "); 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"); }); $('span[name="serviceCollapse"]').click(function() { console.log($(this).attr("class")); if ($(this).attr("class") === "collapsed") alert ("show"); else alert("hide"); }); }); </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.