弹出一个带有 php var 的 javascript 对话框答案

【问题标题】：popup a javascript dialog box with a php var弹出一个带有 php var 的 javascript 对话框
【发布时间】：2013-01-01 06:11:47
【问题描述】：

当我在 PHP 中使用 While 时，如何弹出正确的 javascript 框。这是代码：

while($result= mysql_fetch_array($data)){
    <tr class="<?php echo $style;?>">
        <td><?php echo $result['commissie'];?></td>
        <td class="small"><?php echo $result['volgorde'];?></td>
        <td class="small">
            <div id="dialog-overlay"></div>
                <div id="dialog-box">
                    <div class="dialog-content">
                        <h1>Verwijder van commissie: "<?php echo $result['commissie'];?>"</h1>                                              
                        <div id="dialog-message">
                            <p>Weet je zeker dat je <?php echo $result['commissie'];?>. <?php echo $result_achternaam;?> wilt verwijderen uit de commissie? Dit betekend dat het contactpersoon automatisch zal worden verwijdert uit het systeem.</p>
                        </div>
                        <a href="../checks/delete_commissie.php?id=<?php echo $result['id'];?>" class="button">Ja</a>
                        <a href="#" class="button_no">Nee</a>
                        <div class="clear"></div>
                    </div>
                </div>
             </div> 
             <a href="javascript:popup('<?php echo $result['id'];?>')"><img src="../../images/delete.png"/></a>
         </td>
    </tr>
<?php }//CLOSE THE WHILE

这是javascript：

$(document).ready(function () {

    $('a.button_no').click(function () {     
    $('#dialog-overlay, #dialog-box').hide();       
    return false;
    });
    $(window).resize(function () {
    if (!$('#dialog-box').is(':hidden')) popup();       
    }); 
});

function popup() {

    var maskHeight = $(document).height();  
    var maskWidth = $(window).width();

    var dialogTop =  (maskHeight/3) - ($('#dialog-box').height());  
    var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2); 

    $('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();
    $('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();           
}

问题是当我显示一个对话框时，系统总是会弹出第一个对话框，因为在 WHILE 的表格中

【问题讨论】：

1. ids 在文档上必须是唯一的... 2. 您将变量传递给 popup 并且没有接收/做任何事情... 3. 我建议您使用 ajax 来获取弹出窗口的数据/html，@987654321 @
您在 while() 行上缺少 ?>。

标签： php javascript jquery while-loop

【解决方案1】：

您的问题似乎是由于您的 while 循环中生成了重复的选择器。 ID 属性必须是唯一的。

<div id="dialog-overlay"></div>
<div id="dialog-box">

jQuery $('#dialog-box') 将始终选择#dialog-box 的第一个实例。

你可以在你的 while 循环中增加一个变量，然后用它来触发你的盒子。

$i = 1;

while($result= mysql_fetch_array($data)){ ?>
    <tr class="<?php echo $style;?>">
        <td><?php echo $result['commissie'];?></td>
        <td class="small"><?php echo $result['volgorde'];?></td>
        <td class="small">
            <div id="dialog-overlay<?php echo $i; ?>"></div>
                <div id="dialog-box<?php echo $i; ?>">
                    <div class="dialog-content">
                        <h1>Verwijder van commissie: "<?php echo $result['commissie'];?>"</h1>                                              
                        <div id="dialog-message<?php echo $i; ?>">
                            <p>Weet je zeker dat je <?php echo $result['commissie'];?>. <?php echo $result_achternaam;?> wilt verwijderen uit de commissie? Dit betekend dat het contactpersoon automatisch zal worden verwijdert uit het systeem.</p>
                        </div>
                        <a href="../checks/delete_commissie.php?id=<?php echo $result['id'];?>" class="button">Ja</a>
                        <a href="#" class="button_no" data-buttonID="<?php echo $i; ?>">Nee</a>
                        <div class="clear"></div>
                    </div>
                </div>
             </div> 
             <a href="javascript:popup('<?php echo $result['id'];?>')"><img src="../../images/delete.png"/></a>
         </td>
    </tr>
<?php $i++; }//Increment $i andCLOSE THE WHILE

Javascript

var dialogBox = 1;

$(document).ready(function () {

    $('a.button_no').click(function (e) {
        e.preventDefault();
        dialogBox = $(this).data('buttonID');   
        $('#dialog-overlay' + dialogBox + ', #dialog-box' + dialogBox).hide();       
    });

    $(window).resize(function () {
       if (!$('#dialog-box' + dialogBox).is(':hidden')) popup();       
    }); 
});

function popup() {

    var maskHeight = $(document).height();  
    var maskWidth = $(window).width();

    var dialogTop =  (maskHeight/3) - ($('#dialog-box' + dialogBox).height());  
    var dialogLeft = (maskWidth/2) - ($('#dialog-box' + dialogBox).width()/2); 

    $('#dialog-overlay' + dialogBox).css({height:maskHeight, width:maskWidth}).show();
    $('#dialog-box' + dialogBox).css({top:dialogTop, left:dialogLeft}).show();           
}

【讨论】：

【解决方案2】：

看看你的代码做了什么，你似乎可以通过使用事件处理程序调用函数来更容易地实现它，使用上下文this关键字。显然你需要使用类而不是 ID，正如@PassKit 提到的那样

$("a").click(function(e){
e.preventDefault();
dialog = $(this).prev(); // will get the .dialog_overlay div
// now you can manipulate the dialog using `dialog` as a reference point. 
//e.g dialog.find(".dialog_box").show() etc...
});

【讨论】：