Question

我的目标是让用户点击Flag链接并弹出一个对话框，供用户输入一些文字来解释情况。我不确定如何设置它，以便标志链接仅拉出连接到被标记的帖子的对话框。以下是我到目前为止的情况：

jQuery的：

$(document).ready(function() {

    $(".flagDialog").dialog({ 
        autoOpen: false,
        resizable: false,
        width: 550      
             });

    $(".flag").click(function() {
        var target = $(this);
        $(".flagDialog").dialog( "open" );
        $(".flagDialog").dialog("widget").position({
           my: 'left top',
           at: 'left bottom',
           of: target
        });
    });
});

HTML：

while($row = mysql_fetch_assoc($result)) {
     extract($row);

     <div class='flag'>Flag</div>
     <div class="flagDialog" title="Flag">
        <form action="flag.php" class="flagForm" method="post">
             <textarea name="flag_input" class="flagInput" rows="6" cols="55"><?php echo $username; ?></textarea>
         </form> 
     </div>
   }

目前，当我点击任何标记链接时，所有已经抛出while循环弹出窗口的对话框都是有意义的，我只是不确定我应该如何将它们彼此区分开来并处理它在jQuery方面。

Answer 1

你不得不给旗子提供更多关于它自己的信息，生成flag-div的行将看起来像这样：

 <div class="flag" alt="<?php echo $row->ID; ?>">Flag</div>

您只需在div的alt-Attribute中存储有关该标志的信息

在jQuery中，你可以像这样引用alt-Attribute：

$(".flag").click(function() {
    var alt = $(this).attr("alt"); //Do something with it.

Answer 2

您需要单独识别每个“标记”和对话框（通过ID，类或其他属性）

OR

如果您的代码HTML在您的示例中显示，则可以使用next() selector：

$(".flag").click(function() { 
    $(this).next('div.flagDialog').dialog( "open" );
    $(this).next('div.flagDialog').dialog("widget").position({
       my: 'left top',
       at: 'left bottom',
       of: $(this)
    });
});

如何使用jQuery对话框小部件标记帖子？

2 个答案: