0

当我在 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 的表中

4

2 回答 2

1

查看您的代码所做的事情，您似乎可以通过使用事件处理程序和 contextualthis关键字调用函数来更轻松地实现它。显然，正如@PassKit 提到的，您需要使用类而不是 ID

$("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...
});
于 2013-01-17T16:33:58.993 回答
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();           
}
于 2013-01-17T16:30:06.900 回答