在jquery中使用不同的ID自動打開彈出框

Question

在這里，我使用一個彈出式 jQuery 框作為彈出窗口，但是當我在同一頁面上為多個彈出框使用它時，它只是一個而不是所有彈出框，因為我用於彈出窗口的所有按鈕上的 ID 都是相同的。

<script src="js/jquery-1.9.1.js"></script>

    ;(function($) {

     // DOM Ready
    $(function() {

        // Binding a click event
        // From jQuery v.1.7.0 use .on() instead of .bind()
        $('#full-pop').bind('click', function(e) {

            // Prevents the default action to be triggered. 
            e.preventDefault();

            // Triggering bPopup when click event is fired
            $('#full-detail-box').bPopup();

        });

    });
})(jQuery);

這是彈出窗口

<div id="full-detail-box">this is pop up</div>

Answer 1

嘗試這個

JS

for(var i=0;i<3;i++){
    $('body').append("<div id='full-detail-box"+i+"' class='full-detail-box'>"+(i+1)+" User this is my pop-up window that is opem multi timewith different value </div><br/><a class='btn-pro' data-id='full-detail-box"+i+"' href='#'>Full Detail</a>")
}

 $('.btn-pro').bind('click', function(e) {


            e.preventDefault();

            var id=$(this).data('id');

            // Triggering bPopup when click event is fired
            $('#'+id).bPopup();

       });

而不是這個

$('#full-pop').bind('click', function(e) {

            // Prevents the default action to be triggered. 
            e.preventDefault();

            // Triggering bPopup when click event is fired
            $('#full-detail-box').bPopup();

        });

在這里更新演示

Answer 2

如果我理解正確，您會重復傳遞相同的 id，這只會一遍又一遍地打開相同的彈出窗口。 如果您想要多個彈出窗口，則需要多個 DOM 節點來觸發彈出窗口。

Answer 3

如果您正在使用用戶詳細信息，為什么不附加一個唯一的 ID！？ 您可以在 PHP 中輕松添加或在類名id="full-detail-box-xx"末尾添加用戶 ID，其中 XX 是用戶 ID。

然后，您只需使用函數中具有 SAME id 的按鈕來調用用戶，例如$('#full-detail-' + id).click(function(){ bPopup('#full-detail-box' + id); });

如果您使用的是 PHP，您可以將 ID 寫入 JS 數組或其他內容。 我不確定你的系統是如何設置的。