Question

我有class InviteControlPanel id的控件的多个实例，以及与每个实例关联的FriendControl InviteControlPanel的控件。我只想显示与我点击的FriendControl相关联的<script type="text/javascript"> $(document).ready(function() { $("#FriendControl").click(function() { $(".InviteControlPanelClass").show(); }); }); </script>。有帮助吗？这就是我所拥有的：

ListView

这是带有这两个控件的HTML。请注意，我使用的是ListView，因此InviteControlPanel的每一行都有FriendControl和<asp:ListView ID="listviewBlog" OnItemDataBound="listviewBlog_ItemDataBound" runat="server"> <ItemTemplate> <div class="blogPostHeader clearfix"> <ul class="socialActions"> <li><a id="FriendControl" href="#">Friend</a></li> <asp:Panel ID="InviteControlPanel" class="InviteControlPanelClass" ClientIDMode="Static" runat="server"> <CMS:Invite ID="InviteControl" FriendMessageId="1" ClientIDMode="Static" runat="server" /> </asp:Panel> </li> </ul> </div> </ItemTemplate> </asp:ListView>。

{{1}}

Answer 1

您不应该有多个具有相同ID标记的元素。您也不应该在列表中有一个面板，而是在列表元素之外。话虽这么说，您可以将代码更改为以下内容：

HTML：

<asp:ListView  ID="listviewBlog" OnItemDataBound="listviewBlog_ItemDataBound" runat="server">                                      
<ItemTemplate>
  <li><a class="FriendControl" href="#">Friend</a>
      <asp:Panel ID="InviteControlPanel" class="InviteControlPanel"  ClientIDMode="Static" runat="server"> 
         <CMS:Invite ID="InviteControl"   FriendMessageId="1"    ClientIDMode="Static" runat="server" />
  </li>
      </asp:Panel> 
</ItemTemplate>        
</asp:ListView>

使用Javascript：

$(document).ready(function () {
   $(".FriendControl").click(function () {
       $(this).next(".InviteControlPanel").show();
        });
});

请注意，您可以保留原始代码的格式并使用$(this).parent().next而不是$(this).next，但是（正如我之前所说）div中的ul或ol但在li之外是无效的标记。

Answer 2

这个怎么样：

$(document).ready(function () {
    // On DOM Ready, .hide all matched elements.
    $('.InviteControlPanelClass').hide();

    // On click of this element
    $(".FriendControl").click(function () {
        // Find the parent <li>, get the next control panel and show it.
        $(this).parent().next('.InviteControlPanelClass').show();
    });
});

看看这个JSFiddle（结构的类型[我认为：s]，我也用类替换了ID）。

另外，如上所述，InviteControlPanel只能有1个ID，请考虑使其成为唯一且使用类。

<强>更新
将此代码与上面编辑的jQuery一起使用。

<asp:ListView  ID="listviewBlog" OnItemDataBound="listviewBlog_ItemDataBound" runat="server">                                      
<ItemTemplate>
  <div class="blogPostHeader clearfix">
     <ul class="socialActions">
       <li><a class="FriendControl" href="#">Friend</a></li>
         <asp:Panel ID="InviteControlPanel" class="InviteControlPanelClass"  ClientIDMode="Static" runat="server"> 
           <CMS:Invite ID="InviteControl" FriendMessageId="1" ClientIDMode="Static" runat="server" />  
         </asp:Panel> 
        </li>
      </ul> 
  </div>
</ItemTemplate>        
</asp:ListView>

Answer 3

会做类似下面的工作吗？

$("#FriendControl").click(function () {
     $(this).siblings(".InviteControlPanel").show();
});

显示点击事件的一个实例

3 个答案: