javascript - 单击按钮隐藏 5 个段落中的第 3 段，而不为这些段落分配任何类或 ID

Question

我的前端有五个段落如下:

<form id="form1" runat="server">
    <div id="div">
        <p>para1</p>
        <p>para2</p>
        <p>para3</p>
        <p>para4</p>
        <p>para5</p>
        <asp:Button id="button" runat="server" Text="Click to hide para3!" />     
    </div>
</form>

在 JS 中我写了以下内容:

 $("#button").click(function () {
    $('#div').find('p').hide();
    return false;
});

我知道当我点击 button 时它会隐藏所有 p 标签，所以如果有人能告诉我如何隐藏就更好了仅第三段。

Answer 1

您可以通过使用 eq() 方法来指定要通过其索引检索匹配集中的哪个元素来实现此目的。由于索引是从零开始的，因此要获取第三个元素将是 eq(2)。

另请注意，您应该挂接到 form 元素的 submit 事件，而不是按钮的 click 事件。首先因为这是更好的做法，其次因为您使用的是 ASP.Net 网络表单，这意味着 id 属性将被覆盖在任何 runat="server" 上服务器生成 HTML 时的元素(除非您指定了一个设置，但此处并不特别相关)。

试试这个:

<form id="form1" runat="server">
    <div id="div">
        <p>para1</p>
        <p>para2</p>
        <p>para3</p>
        <p>para4</p>
        <p>para5</p>
        <asp:Button id="button" runat="server" Text="Click to hide para3!" />     
    </div>
</form>

$("form").submit(function(e) {
    e.preventDefault();
    $('#div').find('p:eq(2)').hide();
});

Working example