Bootstrap手风琴：在开始和结束卡中的元素上调用单独的函数

Question

我正在使用BS4制作手风琴。

当卡片的主体打开时，我想要隐藏的每个卡片头上都有一个背景图像，并显示卡片主体何时关闭。

最终目标是在封闭的卡片上显示所有图像，并在打开的卡片上隐藏图像。

整个手风琴都是在forEach（）中创建的;我的ID正在使用该循环中的索引。

如何可靠地调用函数来隐藏正在打开的卡的图像，同时调用一个函数来显示正在关闭的卡上的图像？

我目前的HTML：

<div id="accordion">
    <div class="card">

        <!-- the img I want to toggle opacity on: -->
        <img class="card-img center-cropped" id="cardHeaderBG'+ index +'" src="'+ item.cover_big +'"> </img>

        <div class="card-header card-img-overlay" id="heading' + index + '">' +
            <button class="btn btn-link collapsed" id="wrapper" data-toggle="collapse" data-target="#collapse' + index + '">
            ... content ...
            </button>
        </div>
        <div id="collapse' + index + '" class="collapse" aria-labelledby="heading' + index + '" data-parent="#accordion">
            <div class="card-body">
                ... content ...
            </div>
        </div>
    </div>
</div>

我现在的JS：

$(function() {
  $(".collapse").on('show.bs.collapse', function(e) {
    $(this).siblings("img").animate({opacity: 0})

  })
});


$(function() {
  $(".collapse").on('hide.bs.collapse', function(e) {
    $(this).siblings("img").animate({opacity: 1})
  })
});

谢谢大家，我感谢您愿意提供的任何和所有指导。

Answer 1

请检查下面的代码

HTML：我用qazxsw poi类将图像包装成div

.img

JS：

<div id="accordion">
    <div class="card">

        <!-- the img I want to toggle opacity on: -->
        <div class="img"><img class="card-img center-cropped" id="cardHeaderBG'+ index +'" src="'+ item.cover_big +'"></div>

        <div class="card-header card-img-overlay" id="heading' + index + '">' +
            <button class="btn btn-link collapsed" id="wrapper" data-toggle="collapse" data-target="#collapse' + index + '">
            ... content ...
            </button>
        </div>
        <div id="collapse' + index + '" class="collapse" aria-labelledby="heading' + index + '" data-parent="#accordion">
            <div class="card-body">
                ... content ...
            </div>
        </div>
    </div>
</div>

CSS：

$('.collapse').each(function() {
  var targetColls = $(this);

  targetColls.on('hide.bs.collapse', function () { 
    $(this).closest('.card').find('.img').addClass('img-show');
  });

  targetColls.on('show.bs.collapse', function () {
    $(this).closest('.card').find('.img-show').removeClass('img-show');
  });
});