Javascript，在关闭

Question

使用Bootstrap，这是我使用data- *属性（第一次）从图像链接。该链接有效，在模态中加载图像。

<a href="#" class="portfolio-box" data-img-url="01" data-toggle="modal" data-target="#modal-fullscreen">
    <img src="daco-portfolio-01.jpg" class="img-responsive" alt="">
</a>

我正在尝试从模态中删除之前的图像，然后再加载另一个图像。 我可以通过硬编码值$（'＃portfolio-item-01）.hide（）来实现这一点。 但希望动态删除该项目。

<div class="modal-body">
    <div class="port-wrap" id="portfolio-item-01" style="display: block;">
        <img src="img/portfolio/daco-portfolio-01.jpg" class="img-responsive" alt="">
    </div>
</div>

我想我理解值“item_num”存在范围问题，但我看不到结果。 感谢。

$(function() {
    $('.portfolio-box').on('click', function() {
        var item_num = $(this).attr('data-img-url');
        $('#portfolio-item-' + item_num).fadeIn();
        console.log("end Item num : " + item_num);
        return item_num;
    });
});

//close button inside modal
$(function() {
    $('.btn').on('click', function() {
        console.log('clicked');
        $('#portfolio-item-' + item_num).hide(); //trying to pass item_num
        console.log(item_num);

    });
});

Answer 1

当一个模态关闭时，会触发一个事件“hidden.bs.modal”。 您可以侦听此事件，并在事件触发时调用相应的函数。

$("#modal-id").on('hidden.bs.modal', function(e) {
//your code...
        })

Answer 2

我认为这会奏效。

$(function() {
    var currItem;
    $('.portfolio-box').on('click', function() {
        var item_num = $(this).attr('data-img-url');
        $('#portfolio-item-' + item_num).fadeIn();
        console.log("end Item num : " + item_num);
        currItem = item_num;
        //return item_num;
    });
    $('.btn').on('click', function() {
        console.log('clicked');
        $('#portfolio-item-' + currItem).hide(); //Current item variable 
        console.log(currItem);
    });
});