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();           
}

問題は、ダイアログ ボックスを表示すると、システムが常に最初のダイアログ ボックスを表示することです。

4

2 に答える 2

1

thisコードの動作を見ると、コンテキストキーワードを使用してイベント ハンドラーを使用して関数を呼び出すことで、より簡単に実現できるように思えます。@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 に答える