Jquery ui对话框触发多个对话框问题
本文关键字：对话框 问题 ui Jquery | 更新日期: 2023-09-27 17:57:36
我有一个列表表，其中显示了asp.net mvc网站中数据库中的一些信息。
我想做的是检查项目状态是否为1，以及是否存在评论，以显示一个小图标，用户可以点击它并查看该项目的特定评论。
因此，在列表表中，根据上述标准，它似乎可以很好地显示该图标，但当我单击某个特定列表时，它会打开所有对话框，其中包含所有其他具有相同项目状态的列表的注释，而不是我选择的列表。
你能帮我一下我做错了什么吗？
<table id="listTable" style="width:100%;" >
<tr>
<th style="text-align:center">
#
</th>
<th style="padding-left:5px;">
Item Name
</th>
<th>
Start Date
</th>
<th>
End Date
</th>
<th>
Request Date
</th>
<th>
Request Status
</th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.BookingId)
</td>
<td>
<a href="@Url.Action("ItemDetails", new {id=item.ItemId })" title="@item.Item.ItemDescription">
@Html.DisplayFor(modelItem => item.Item.ItemName)
</a>
</td>
<td>
@Html.DisplayFor(modelItem => item.StartDate)
</td>
<td>
@Html.DisplayFor(modelItem => item.EndDate)
</td>
<td>
@Html.DisplayFor(modelItem => item.RequestDate)
</td>
@if (item.StatusCodeId == 1)
{
<td style="color:#DD7500">
@Html.DisplayFor(modelItem => item.StatusCode.StatusCodeName)
@if (item.Comments != null)
{
<img class="orangeclicker" style="margin-left:3px;display:inline;margin-bottom:-3px;cursor: pointer;" title="Tutor Comments" src="~/Images/chat_icon.gif" />
<div class="orangedialog" title="Tutor Comments">
<p> @item.Comments</p>
</div>
}
</td>
}
else if (item.StatusCodeId == 2)
{
<td style="color:darkgreen">
@Html.DisplayFor(modelItem => item.StatusCode.StatusCodeName)
@if (item.Comments != null)
{
<img id="greenclicker" style="margin-left:3px;display:inline;margin-bottom:-3px;cursor: pointer;" title="Tutor Comments" src="~/Images/chat_icon.gif" />
<div id="greendialog" title="Tutor Comments">
<p>@item.Comments</p>
</div>
}
</td>
}
else if (item.StatusCodeId == 3)
{
<td style="color:red">
@Html.DisplayFor(modelItem => item.StatusCode.StatusCodeName)
@if (item.Comments != null)
{
<img id="redclicker" style="margin-left:3px;display:inline;margin-bottom:-3px;cursor: pointer;" title="Tutor Comments" src="~/Images/chat_icon.gif" />
<div id="reddialog" title="Tutor Comments">
<p>@item.Comments</p>
</div>
}
</td>
}
else if (item.StatusCodeId == 4)
{
<td style="color:black">
@Html.DisplayFor(modelItem => item.StatusCode.StatusCodeName)
@if (item.Comments != null)
{
<img id="blackclicker" style="margin-left:3px;display:inline;margin-bottom:-3px;cursor: pointer;" title="Tutor Comments" src="~/Images/chat_icon.gif" />
<div id="blackdialog" title="Tutor Comments">
<p>@item.Comments</p>
</div>
}
</td>
}
</tr>
}
</table>
<script>
$(function ()
{
$('.orangedialog, #greendialog, #reddialog, #blackdialog').dialog({
autoOpen: false,
show: { effect: "blind", duration: 1000 },
hide: { effect: "explode", duration: 1000 },
buttons: {
Close: function () {
$(this).dialog("close");
}
}
});
$("#greenclicker").live("click", function () {
$("#greendialog").dialog("open");
});
$('.orangeclicker').live("click", function () {
$(".orangedialog").dialog("open");
});
$("#redclicker").live("click", function () {
$("#reddialog").dialog("open");
});
$("#blackclicker").live("click", function () {
$("#blackdialog").dialog("open");
});
});
</script>
html:
<table id="listTable" style="width:100%;" >
<tr>
<th style="text-align:center">
#
</th>
<th style="padding-left:5px;">
Item Name
</th>
<th>
Start Date
</th>
<th>
End Date
</th>
<th>
Request Date
</th>
<th>
Request Status
</th>
</tr>
<tr>
<td>
192
</td>
<td>
<a href="/Home/ItemDetails/42" title="this is a lab computer">
Lab Computer 1
</a>
</td>
<td>
08/04/2014 09:00:00
</td>
<td>
09/04/2014 09:00:00
</td>
<td>
26/03/2014
</td>
<td style="color:#DD7500">
In Progress
<img class="orangeclicker" style="margin-left:3px;display:inline;margin-bottom:-3px;cursor: pointer;" title="Tutor Comments" src="/Images/chat_icon.gif" />
<div class="orangedialog" title="Tutor Comments">
<p> testtttttttttttttt</p>
</div>
</td>
</tr>
<tr>
<td>
191
</td>
<td>
<a href="/Home/ItemDetails/42" title="this is a lab computer">
Lab Computer 1
</a>
</td>
<td>
01/04/2014 17:03:00
</td>
<td>
02/04/2014 09:05:00
</td>
<td>
26/03/2014
</td>
<td style="color:#DD7500">
In Progress
<img class="orangeclicker" style="margin-left:3px;display:inline;margin-bottom:-3px;cursor: pointer;" title="Tutor Comments" src="/Images/chat_icon.gif" />
<div class="orangedialog" title="Tutor Comments">
<p> You won't get such a fast computer !!!</p>
</div>
</td>
</tr>
<tr>
<td>
190
</td>
<td>
<a href="/Home/ItemDetails/44" title="3 ghz / 6gm ram / 1tb drive">
Ibm Laptop
</a>
</td>
<td>
10/04/2014 09:00:00
</td>
<td>
11/04/2014 09:00:00
</td>
<td>
19/03/2014
</td>
尝试下面的代码。我认为不能使用siblings()，因为所有的.orangedialog类都是兄弟类。
HTML
<img class="orangeclicker" commentid="@item.bookingid" style="margin-left:3px;display:inline;margin-bottom:-3px;cursor: pointer;" title="Tutor Comments" src="~/Images/chat_icon.gif" />
<div class="orangedialog @item.bookingid" title="Tutor Comments">
<p> @item.Comments</p>
</div>
Javascript
$('.orangeclicker').live("click", function () {
$('.'+$(this).attr('commentid')).dialog("open");
});
更新：对话框插件改变了周围的dom。我们添加了一个自定义id，如上所示。
尝试这种方式
<script> $(function ()
{
$(" .orangedialog").dialog({
autoOpen: false,
show: { effect: "blind", duration: 1000 },
hide: { effect: "explode", duration: 1000 },
buttons: {
Close: function () {
$(this).dialog("close");
}
}
});
$('.orangeclicker').on("click", function () {
$(this).parent().find(".orangedialog").dialog("open"); //this will open only its respective comments dialog
});
});
注意：始终使用最新的jQuery库更新，.live()已弃用，从jQuery 1.7起，请使用.on
快乐编码：）