Question

我有6个图像加载到不同的6个不同的模态窗口中，它们每个都有一个下一个按钮，还有一个关闭按钮。下一个按钮使用以下jquery代码：

    $('#nextModal12').click(function() {
        $('#featuresModal1').modal('hide');
        $('#featuresModal1').on('hidden.bs.modal', function () {
            $('#featuresModal2').modal('show');
            document.getElementById('#featuresModal1').style.display="none";
        });
    });

    $('#nextModal23').click(function() {
        $('#featuresModal2').modal('hide');     
        $('#featuresModal2').on('hidden.bs.modal', function () {
            $('#featuresModal3').modal('show');
            document.getElementById('#featuresModal2').style.display="none";                            
        });
    });

然而，问题是：即使我关闭 / 隐藏第一个模式（'＃nextModal12'），只需点击CLOSE按钮而不是下一个，第二个莫代尔出现了。

我相信这是因为即使我没有点击下一个按钮，也会拾取并再次调用hidden.bs.modal函数。 如何阻止脚本不加选择地获取hidden.bs.modal函数？

Answer 1

尝试使用 .one 功能代替 .on 。当您使用.on（）时，您的回调会一次又一次地重复，因为每次点击都会再次绑定它;

$('#nextModal12').click(function() {
    $('#featuresModal1').modal('hide');
    $('#featuresModal1').one('hidden.bs.modal', function () {
        $('#featuresModal2').modal('show');
    });
});

$('#nextModal23').click(function() {
    $('#featuresModal2').modal('hide');     
    $('#featuresModal2').one('hidden.bs.modal', function () {
        $('#featuresModal3').modal('show');                          
    });
});

Answer 2

不要在模态点击上反复绑定hidden.bs.modal，只需将其绑定一次，

$('#nextModal12').click(function() {
    $('#featuresModal1').modal('hide');
});
 $('#featuresModal1').on('hidden.bs.modal', function () {
    $('#featuresModal2').modal('show');
    $(this).hide();// you can use hide function
});

$('#nextModal23').click(function() {
    $('#featuresModal2').modal('hide');     
});   
$('#featuresModal2').on('hidden.bs.modal', function () {
    $('#featuresModal3').modal('show');
    $(this).hide(); 
});

或者，您可以尝试

$('#nextModal12').click(function() {
    $('#featuresModal1').modal('hide'); // hide first
    $('#featuresModal2').modal('show'); // show second
});

$('#nextModal23').click(function() {
    $('#featuresModal2').modal('hide');
    $('#featuresModal3').modal('show');
});

Bootstrap 3模态事件（Hidden.Bs.Modal）保持重复

2 个答案: