Question

我有一个页面，其中有一个随机数量的项目，每个项目都有一个按钮和一个模态 - 因为我不知道有多少项目我将使用按钮和模态的类。

当我点击任何按钮时，它会加载所有模态，而我只希望它加载下一个模态 - 我试图使用最接近的模式，但是不能让它们被激活。

<div class="social-button-container">
    <button type="button" class="social-button">Button</button>
</div>

<div class="socialModal modal fade">
    <h2>123</h2>
</div>

<div class="social-button-container">
    <button type="button" class="social-button">Button2</button>
</div>

<div class="socialModal modal fade">
    <h2>234</h2>
</div>

$(document).ready(function () {
    $('.social-button').click(function () {
        $('.socialModal').modal();
        return false;
    });
});

以上代码的工作原理是模态可以触发，但它们都有 - 我尝试使用：

$(document).ready(function () {
    $('.social-button').click(function () {
        $('.socialModal').next().modal();
        return false;
    });
});

但这根本不做任何事（没有火）

也尝试过：

$(document).ready(function () {
    $('.social-button').click(function () {
        $(this).next('.socialModal').modal();
        return false;
    });
});

具有相同的结果 - 如何在单击相关按钮时仅打开以下模态？

http://jsfiddle.net/0v0pg7fx/

Answer 1

你的选择器有点偏，你可能想先初始化模态。

$('.socialModal').modal({show:false});

$('.social-button').click(function () {
    $(this).closest('.social-button-container').next('.socialModal').modal('show');
});

<强> Demo

Answer 2

$(document).ready(function () {
                            $('.button').click(function () {
                                $('.Modal').closest().modal();
                                return false;
                            });
                        });

仅打开最接近按钮的模态

2 个答案: