如何确定哪个元素触发了手风琴折叠事件

debugcn 发表于 Dev

涡轮莱

我有一个使用 JQuery 动态填充的手风琴。我想在触发器上启动一个特定于每个元素的脚本。我很容易地想出了如何检查崩溃：

<script>
  $('#accordion').on('show.bs.collapse', function () {
       alert($(this).text());
});
</script>

但是，在 $(this) 中，我拥有所有的手风琴，而不仅仅是折叠的元素。我无法检查特定 ID，因为我不知道

零零

传递事件对象直通回调和使用e.target代替this。我替换了alarm()，console.log()所以看看左手角，你会看到每个.collapse报告它#id的show.bs.collapse事件。

演示

$('.collapse').on('show.bs.collapse', function(e) {
  console.log(e.target.id);
});

.collapse::before {
  content: attr(id)
}

.collapse {
  font-size: 20px;
  background: rgba(0, 0, 0, .3);
  border: 3px ridge blue;
}

.as-console-wrapper {
  max-width: 30%;
  margin-left: 70%
}

<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>


<div class='btn btn-primary' data-toggle="collapse" data-target="#col0">COL0</div>

<div class='btn btn-primary' data-toggle="collapse" data-target="#col1">COL1</div>

<div class='btn btn-primary' data-toggle="collapse" data-target="#col2">COL2</div>
<hr>
<div id='col0' class="collapse panel-collapse">
  <div class='panel-body'></div>
</div>

<div id='col1' class="collapse panel-collapse">
  <div class='panel-body'></div>
</div>

<div id='col2' class="collapse panel-collapse">
  <div class='panel-body'></div>
</div>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。