Question

我有一个动态生成的超链接。另外我有一个动态生成的“p”标签，但是它是隐藏的。我已经为这两个ID添加了ID，并希望将jQuery用于click事件。当用户点击超链接时，它将显示其上方只有P标记。通常情况下，我只会添加ID的结尾部分，但由于您生成了两个动态ID，如何将它们连接在一起而不会触发其他ID？下面是我的代码示例：

<asp:ListView runat="server"...>
  <ItemTemplate>
    <p id="MsgClick" runat="server">You have click on this button></p>
    <asp:HyperLink ID="label" runat="server" NavigateURL='<%#Eval("Link")%>' Target="_blank" Text="Click Here"></asp:HyperLink>
  </ItemTemplate>
</asp:ListView>

<script type="text/javascript">
  $(document).ready(function(){
    $([id$='MsgClick']").hide();
    $("[id$='label']").on('click', function() {
      $("[id$='MsgClick']").show();
    })
  });
</script>

Answer 1

使用类选择器而不是Id：

<asp:ListView runat="server"...>
  <ItemTemplate>
    <p id="MsgClick" class="MsgClick" runat="server">You have click on this button</p>
    <asp:HyperLink ID="label" class="label" runat="server" NavigateURL='<%#Eval("Link")%>' Target="_blank" Text="Click Here"></asp:HyperLink>
  </ItemTemplate>
</asp:ListView>

<script type="text/javascript">
  $(document).ready(function(){
    $(".MsgClick").hide();
    $(".label").on('click', function() {
      $(this).prev(".MsgClick").show();
    })
  });
</script>

Answer 2

您不必依赖id来完成此任务。 jQuery提供了遍历DOM的不同方法。此外，您可以使用CSS隐藏<p>而不依赖于JS。

例如：

$("a").on("click", function() {
    $(this).prev("p").show();
});

http://codepen.io/johnniebenson/pen/QELzLL

Access ASP.NET控制jQuery中的动态客户端ID

2 个答案: