仅选择同一元素内的单个元素 | jQuery 选择器

Question

所以我有一个无序列表，列表中的每个项目都有一个按钮，用于切换帖子评论文本区域。不幸的是，当我第一次尝试单击一个“发表评论”按钮时，所有文本区域都会打开，然后我尝试使用它来确保只选择一个元素。这是代码：

<ul class="todosDisplay">
 <li><span>Content of todo</span><a class="postComment">Post Comment</a>
     <textarea class="showMe"></textarea>
 </li>
<li><span>Content of todo</span><a class="postComment">Post Comment</a>
     <textarea class="showMe"></textarea>
 </li>
<li><span>Content of todo</span><a class="postComment">Post Comment</a>
     <textarea class="showMe"></textarea>
 </li>
 </ul>

这是我的 jquery 代码

$(".postComment").click(function () { 
          $(this).parent().find(".showMe").toggle();
        });

正如你所看到的，我可怜的人试图获取 ACTUAL 元素的父元素，然后找到我们需要切换的元素，但这是行不通的:)

提前非常感谢！

Answer 1

你可以使用 jQuery 的 $.closest(".showMe") 函数。

Answer 2

刚刚在 Visual Studio 中构建了这个，它似乎可以工作。我在上面的示例中注意到的唯一一件事是锚标记中缺少 href，导致 IE 不会将它们呈现为链接。我添加了 href="#" 并且您的代码似乎对我有用。单击该链接将正确关闭文本区域。

<script type="text/javascript">
    $(document).ready(function() {

        $(".postComment").click(function() { $(this).parent().find(".showMe").toggle(); });

    });
</script>

<ul class="todosDisplay">
    <li><span>Content of todo</span><a class="postComment" href="#">Post Comment</a>
        <textarea class="showMe"></textarea>
    </li>
    <li><span>Content of todo</span><a class="postComment" href="#">Post Comment</a>
        <textarea class="showMe"></textarea>
    </li>
    <li><span>Content of todo</span><a class="postComment" href="#">Post Comment</a>
        <textarea class="showMe"></textarea>
    </li>
</ul>

Answer 3

我建议将 jQuery 更改为：

$(".postComment").click(function(){ 
   $(this).siblings(".showMe").toggle();
   return false;
});