我有一个列表，在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>
答案 0 :(得分：1)
尝试以下代码。我认为你不能使用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，如上所示。
答案 1 :(得分：0)
试试这种方式
<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 lib进行更新，不推荐使用.live()，从jQuery 1.7开始，使用.on
快乐编码：）