c# - Jquery ui 对话框触发多个对话框问题

Question

我有一个列表显示来自 asp.net mvc 网站中的数据库的一些信息。

我想做的是检查项目状态是否为 1，以及是否存在评论以显示一个小图标，用户将在该图标上单击它并查看该项目的特定评论。

因此在 list 表中，根据上述标准，该图标似乎可以正常显示，但是当我单击特定 list 时，它会打开所有对话框，其中包含具有相同项目状态的所有其他 list 的评论，而不是我选择的那个.

你能帮我看看我做错了什么吗？

    <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&#39;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>

Answer 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，如上所示。