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，它触发了一个在上面的代码中看不到的链接，但它被称为“.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结构。如果你可以在包装器中包装整个“添加注释”和“commentbox”部分，那么你可以毫无问题地选择它。

请参阅此example jsfiddle

jquery显示/隐藏与其他人具有相同类别的单个div

5 个答案: