JQuery 和 Wordpress - 在唯一 ID 中隐藏多个 div？

Question

我正在尝试为 WordPress 评论编写一个简短的 WordPress JQuery，允许用户打开和关闭特定评论。这是我的第一个剧本，我过得很艰难。

在“comment_options”DIV 中有一系列按钮，用于控制各个评论(回复、引用、编辑、关闭等)。我正在尝试编写此脚本的目的是关闭按钮。我需要它来切换“gravtar”和“comment_content”DIV，但将其余部分保留在适当的位置，以便它仍然显示用户 ID 和控件。

但是，我似乎不知道如何控制该操作。

[编辑]这是更新后的代码:

// Custom comments callback
    function steelfrog_comments($comment, $args, $depth) {
        $GLOBALS['comment'] = $comment; ?>

        <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>" class="comment_comment">

            <div class="comment_info">  

                <div class="gravatar">
                    <?php echo get_avatar($comment,$size='80',$default='<path_to_url>' ); ?>
                </div>

                <div class="comment_poster">
                    <h5><?php comment_author_link(); ?></h5>
                    <span><?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?></span>
                </div>

                <div class="comment_options">
                    <ul class="options">
                        <li class="reply"><a href="#" title="Reply to this comment"><span>Reply to this comment</span></a></li>
                        <li class="quote"><a href="#" title="Quote and reply this comment"><span>Quote this comment</span></a></li>
                        <li class="link"><a href="#" title="Link to this comment"><span>Link to this comment</span></a></li>
                        <li class="website"><a href="#" title="Website of commentor"><span>Website of commentor</span></a></li>
                        <li class="edit"><a href="#" title="Edit this comment"><span>Edit this comment</span></a></li>
                        <li class="close"><div class="trigger"><a href="#" title="Remove this comment until the page is refreshed"><span>Remove this comment until the page is refreshed</span></a></div></li>
                    </ul>
                </div>
            </div>

            <div class="comment_content">
                <?php comment_text() ?>
            </div>
        <?php } 

当前的 JQuery 脚本:

$(document).ready(function(){
    $("div.trigger").click(function() {
        $(this).parent.parent("li").children(".gravatar, .comment_content").slideToggle();
    });
});

[编辑]通过使用两个单独的选择器让它工作，但它确实很难看。

$(document).ready(function(){

    $(".trigger").click(function(){
        $(this).parent().parent().parent().parent().parent().children(".gravatar, .comment_content").slideToggle('300');
        $(this).parent().parent().parent().parent().children(".gravatar").toggle('300');
        return false
    });

});

Answer 1

您想要找到与触发元素相关的 div，如下所示

$("div.trigger").click(function() {
  $(this).closest("li:not(.close)")
         .find(".gravatar, .comment_content").slideToggle();
});

这将攀升至 <li>包装.trigger然后查找其中的那些 div。

您之前拥有的内容，如下所示:$("div.gravatar") ，搜索所有 <div class="gravatar">上面的代码将改变，而不仅仅是在某个元素内。