Question

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

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

然而，在$（this）中，我拥有所有的手风琴而不仅仅是崩溃的元素。我无法检查具体ID，因为我不知道

Answer 1

不要使用'this'，而应使用函数中的'event'参数：

<script>
    $('#accordion').on('show.bs.collapse', function (event) { // Note the 'event' parameter

        // event.target is the collapsed element
        alert(event.target);

        // You can use this element to get the id like this: $(event.target).attr('id')
    });
</script>

Answer 2

通过回调传递事件对象并使用 e.target 而不是this。我将alarm()替换为console.log()，因此请查看左上角，您会看到每个.collapse在#id事件中报告show.bs.collapse。< / p>

演示

＆＃13;

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

＆＃13;

.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%
}

＆＃13;

<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>

＆＃13;

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

2 个答案:

演示