总是取第一个元素 id。如何使其重置事件并获取实际元素答案

【问题标题】：always taking first element id. How to make it reset of event and taking actually element总是取第一个元素 id。如何使其重置事件并获取实际元素
【发布时间】：2019-10-10 09:45:22
【问题描述】：

我正在制作 bootstrap 手风琴，当它显示时改变图标，当它隐藏它时，它会将图标变回以前的图标。我做了这个函数，它几乎可以工作，但我的问题是它总是需要元素的第一个 ID，而不是当我点击时实际元素 ID。是否有可能获取元素的实际 id 而不仅仅是第一个元素。

jQuery(document).on('show.bs.collapse', function() {

    var childIdStr = jQuery(this).children().find('i').attr('id');
    var myId = "#" + childIdStr;

    jQuery(myId).removeClass('dashicons-plus');
    jQuery(myId).addClass('dashicons-minus');
});

jQuery(document).on('hide.bs.collapse', function() {
    var childHideIdStr = jQuery(this).children().find('i').attr('id');
    var myId = "#" + childHideIdStr;

    if(jQuery('.collapse').hasClass('show')){
        jQuery(myId).removeClass('dashicons-minus');
        jQuery(myId).addClass('dashicons-plus');
    }    
});

<div id="accoridian" class="mt-5" role="tablist">

    <div class="footer-card">
        <div class="footer-card-header">
            <div class="row">
                <div class="col footer-card-headline">Center</div>
                <div class="col footer-card-icon"><a data-toggle="collapse" href="#collapseOne"><i id="collapse1"
                            class="dashicons dashicons-plus"></i></a></div>
            </div>
        </div>

        <div id="collapseOne" class="collapse">
            <div class="card-body footer-card-body">
                <p>Aalykkevej 1<br />
                    6240 Løgumkloster</p>

                <b class="text-uppercase">Telefon</b>
                <p>74 92 81 18 (hverdage fra 8.00 - 15.00)</p>

                <b class="text-uppercase">E-mail</b>
                <p>hviding.asylsyd@toender.dk</p>
            </div>
        </div>
    </div> <!-- ./footer-card -->

    <!-- Center Hviding -->
    <div class="footer-card mt-2">
        <div class="footer-card-header">
            <div class="row">
                <div class="col footer-card-headline">Center hviding</div>
                <div class="col footer-card-icon"><a data-toggle="collapse" href="#collapseTwo"><i id="collapse2"
                            class="dashicons dashicons-plus"></i></a></div>
            </div>
        </div>

        <div id="collapseTwo" class="collapse">
            <div class="card-body footer-card-body">
                <p>Ribevej<br />
                    6720 Ribe</p>

                <b class="text-uppercase">Telefon</b>
                <p>74 92 93 59 (hverdage fra 8.00 - 15.00)</p>

                <b class="text-uppercase">E-mail</b>
                <p>hviding.asylsyd@toender.dk</p>
            </div>
        </div>
    </div> <!-- ./footer-card -->

【问题讨论】：

您可以在单击事件时传递当前对象或放置自定义属性以供选择。

标签： jquery bootstrap-4 accordion

【解决方案1】：

只需将复杂的 jQuery 更改为

jQuery('a[data-toggle="collapse"] i').on('click',function(e){
   $(this).toggleClass('dashicons-plus');
   $(this).toggleClass('dashicons-minus');
});

【讨论】：

【解决方案2】：

把你的 jQuery 改成

jQuery(document).on('show.bs.collapse', function(e) {
   var childIdStr = e.currentTarget.activeElement.firstChild.id;
   var myId = "#" + childIdStr;
   jQuery(myId).removeClass('dashicons-plus');
   jQuery(myId).addClass('dashicons-minus');
});

jQuery(document).on('hide.bs.collapse', function(e) {

   var childHideIdStr = e.currentTarget.activeElement.firstChild.id;
   var myId = "#" + childHideIdStr;

   if(jQuery('.collapse').hasClass('show')){
      jQuery(myId).removeClass('dashicons-minus');
      jQuery(myId).addClass('dashicons-plus');
   }
});

【讨论】：