当无法分配div id时，一次打开一个jquery模态对话框

Question

我已经处理这个问题几天了，因为我在stackoverflow或谷歌上似乎找不到答案，所以我在问我的问题。如果只是我没有正确表达，请给我指出现有的问题和答案。

我正在使用PHP OOP编写我的第一个web应用程序，并实现了一个搜索功能。用户搜索的结果被放入一个包含该html的搜索结果视图中(该视图被传递给一个具有完整html格式的模板)，并在每个列表中填充一个按钮，上面写着"联系本研究的协调员"：

<?php foreach($results as $result): ?>
<article>
<h1><?=$result['study_name']?>: <?=$result['study_topic']?>, by <?=$result['conducting_facility']?> in <?=$result['facility_location']?><br>
Phase <?=$result['phase']?></h1><br>    
<p><?=$result['study_summary']?></p>
<br>
<div class="contact_btn_info" title="Contact A Coordinator" id="specific_study">
<form id="contact_form" name="contact_form" action="/users/p_sendmessage" method="POST">
First name: <input type="text" name="first_name" minlength="2" required><br>
Last name: <input type="text" name="last_name" minlenth="2" required><br>
Preferred Email: <input type="email" name="preferred_email" required><br>
Study Name: <input type="text" name="study_name" value="<?=$result['study_name']?>">    <br>
Your message: <textarea name="message" style="width:250px;height150px;"></textarea> 
</form>
</div>
<button class="contact_coordinator">Contact a coordinator about this study</button>
<script src="/js/main.js"></script>
<script>$("#contact_form").validate();</script>
</article>  
<br>
<?php endforeach; ?> 

视图调用的javascript是jqueryUI的对话框函数，我这样写：

$('.contact_coordinator').click(function() {
$('.contact_btn_info').dialog('open');
}); 

$('.contact_btn_info').dialog({
autoOpen: false, 
height: 450,
width: 350, 
modal: true,
buttons: {
"Send Message": function() {
$("form[name='contact_form']").submit()
$('#contact_form').submit();
$(this).submit();
$('.contact_btn_info').submit();
}
}
});

我的目标是，当视图中有多个搜索结果时，按钮的每个实例应该只加载对话框模式窗口，并预先填充其各自的研究名称。正如JS现在所写的那样，每次点击按钮都会为所有搜索结果打开一个模式窗口，每个窗口都是分层的。我知道如何选择ID和类来一次只触发一个窗口，但我的问题是，当搜索结果取决于用户输入时，我不能在html中预先分配ID。我还尝试为所在的html分配一个ID，即"specific_study"，但当我在JS中使用该ID并试用该页面时，每个搜索结果的按钮都只给我预先填充的第一个结果的研究名称。

我不能成为第一个有这个编码目标的人，所以我希望有人能帮忙！提前谢谢。

Answer 1

您可以在dialogopen事件处理程序中分配任何需要的内容。即：

$('.contact_btn_info').dialog({
...
open : function() {
$(this); // this = the current $('.contact_btn_info') element.
$(this).dialog('widget'); // the dialog container surrounding your $('.contact_btn_info') element
// you can do whatever you need with element inside here by using `find()` or `children()` on the $(this) element.
}
});