1

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

<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 元素的父元素，然后找到我们需要切换的元素不起作用:)

提前非常感谢！

4

3 回答 3

1

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

于 2009-10-07T18:02:10.300 回答
0

我建议将 jQuery 更改为：

$(".postComment").click(function(){ 
   $(this).siblings(".showMe").toggle();
   return false;
});
于 2009-10-07T23:57:16.583 回答
0

刚刚在 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>
于 2009-10-07T18:08:06.133 回答