Question

我用html表标签制作了网格。在TD标签之一我有这个代码

<td>
     <a onclick="$('#lightBox').css('display','inline')"></a>
     <div style="display: none" id="lightbox">
    <%--<%Html.RenderAction("LightBox","PremiumSharingAdmin",new {historyId = premium.SharingPremiumHistoryID}); %>--%>
          <img  src="Storage/Images/<%=premium.SharingPremiumHistoryID %>.jpg" title="image" width="100" height="100"/>
              <div>
                  <textarea readonly="readonly"> 
                      <%= premium.Content %>
                  </textarea>
              </div>
              <div>
                  <input type="text" readonly="readonly" value="<%= premium.SharingTitle %>"/>
              </div>
    </div>
</td>

这些标记为网格行提供了一些额外信息，默认情况下是隐藏的。

另一方面，我有Link标签，如果用户按下该行显示该行。

但问题是，当我按下它时，它只显示第一个记录细节，当我按下其他按钮时，它会显示第一行细节。

问题在哪里？

这是我的整个ASPX视图

<% foreach (var premium in Model)
   {%>
    <tr>
        <td style=" font-weight: bold;width: 130px;">

            <span ><%= premium.SharingTitle %></span>

        </td>
        <td style=" font-weight: bold;width: 130px;">
            <span ><%= premium.AddedDate.ConvertToPersianDate(true) %></span>
        </td>
        <td style="width: 130px;">
            <span> <%=  premium.IsSubmit %></span>


        </td>
         <td style="width: 130px;">
            <span> <%=  premium.ResturantName %></span>


        </td>
         <td style="width: 130px;">
            <span> <%=  premium.Content %></span>


        </td>
          <td style="width: 130px;">
           <div class="group">
                <a class="delete" href="<%= Url.Action("submit", "PremiumSharingAdmin", new {historyId = premium.SharingPremiumHistoryID}) %>" onclick="return confirm('آیا می‌خواهید این خبر را تایید کنید؟');">تایید</a>

            </div>


        </td>
        <td>
            <a onclick="$('#lightBox').css('display','inline')"></a>
            <div style="display: none" id="lightBox">
              <%--<%Html.RenderAction("LightBox","PremiumSharingAdmin",new {historyId = premium.SharingPremiumHistoryID}); %>--%>
                  <img  src="Storage/Images/<%=premium.SharingPremiumHistoryID %>.jpg" title="image" width="100" height="100"/>
                      <div>
                          <textarea readonly="readonly"> 
                              <%= premium.Content %>
                          </textarea>
                      </div>
                      <div>
                          <input type="text" readonly="readonly" value="<%= premium.SharingTitle %>"/>
                      </div>
            </div>
        </td>
    </tr>
<%} %>

Answer 1

您通过为多个<div>元素提供相同的id属性来生成无效的html。 $('#lightBox').css('display','inline')将返回id="lightbox"的所有元素，但只设置第一个的样式。

相反，使用类名并使用相对选择器。我还建议你使用Unobtrusive Javascript和css，而不是用行为来污染你的标记。

HTML

<td>
  <a href="#" class="toggle hidden">Show</a>
  <div class="lightbox">Some content to display</div>
</td>

CSS

.lightbox {
  display: none;
}

脚本（页面底部）

  <script>
    $('.toggle').click(function () {
      if ($(this).hasClass('hidden')) {
        $(this).next('div').show();
        $(this).text('Hide');
      } else {
        $(this).text('Show');
        $(this).next('div').hide();
      }
      $(this).toggleClass('hidden');
    });
  </script>
</body>

附注：使用RenderAction呈现隐藏div的内容表明内容很大和/或您调用服务/数据库来获取内容。如果是这种情况，您应该使用ajax按需加载内容（除非您希望用户查看所有行的详细信息）

在asp.net mvc网格中显示隐藏的行

1 个答案: