jQuery 显示/隐藏与其他类相同的单个 div

Question

我目前正在发表评论和喜欢系统，就像 facebook 上的一样。 但我就是不知道如何选择特定的 div！

我当前的 HTML 如下所示：

<div class='activoptions'><a href='#'>Like</a>  <a href='#' class="addcomment">Add commentr</a>  <a href='#'>Share</a>
</div>
<ul class="addcommentbox">
    <li class="commentlist">
        <div class="CommentBox">
            <div class="CommentBoxPicBox">
                <a href="">
                    <img src="" />
                </a>
            </div>
            <div class="CommentBoxTextBox">
                <div class="CommentBoxTextBoxName">Name</div>
                <div class="CommentBoxTextBoxText">Some lovely text inside a lovely div</div>
                <div class="CommentBoxTextBoxTime">x minutes ago - <a href="#">Like</a>
                </div>
            </div>
        </div>
    </li>
</ul>

我已将“CommentBox” CSS 设置为display:none; 所以它是不可见的，我的 jQuery: $(".commentbox").show();

这就是 jQuery 选择正确 div 的方式，该 div 触发了一个在上面的代码中不可见但名为“.commentadd”的链接。 我在 jquery.net 论坛上到处找，我找到了这个小代码片段。

$(".addcomment").click(function(){
    var $this = $(this);
    var child = $this.find('.addcommentbox').html();
    $(child).show();
});

编辑：对不起，它太不精确了......我会立即编辑它并为你澄清更多......好吧......我正在获取所有最近的活动和状态，并且我正在为所有这些人提供上面的HTML结构。 我想要的是当有人点击喜欢、评论或分享时，只有他们点击的活动才会通过一些 ajax 查询并插入到数据库中。

Answer 1

$(".addcomment").click(function(){
    $('.CommentBox').show();
}); 

应该够了。 尝试一下，如果您遇到新问题，请告诉我。

Answer 2

由于我不知道您的 HTML 结构，因此我认为您正在尝试在不知道 ID 的情况下显示 DIV。

$(".addcomment").click(function(){
    $(this).parent().find('.CommentBox').show();
});

介意发布您的 HTML 结构（包括.addcomment在哪里），以便我可以使代码工作？

Answer 3

您可以在“div”上添加不同的“id”并像这样匹配“id”：

$("#my_id").show(); // or you can use "toggle" to show/hide 

细节：

$(".addcomment").click(function(){
     $("#" + $(this).attr('id')).show(); // or toggle
});

我希望我的回答是清楚的，我不知道...

Answer 4

您的 javascript 与您的 HTML 不一致，因为类都不同，但在您发布的脚本中：

 $(".addcomment").click(function(e){

    e.preventDefault();

    var $this = $(this);
    var child = $this.find('.addcommentbox').html();
    $(child).show();
 });  

child 是一个文本节点，而不是一个 jQuery 元素列表。 从末尾删除 .html() ，这将显示带有“addcommentbox”类的 div。 另一方面，您可能想要添加 e.preventDefault(); 防止链接点击的默认操作（如我在上面添加的）

Answer 5

我认为问题在于您的 html 结构。 如果您可以将整个“添加评论”和“评论框”部分包装在包装器中，那么您可以毫无问题地选择它。

看这个例子jsfiddle