Question

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

<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 =“＃”，你的代码似乎对我有用。单击该链接将正确关闭textarea。

<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;
});

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

3 个答案: