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

Question

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

在“comment_options”中，DIV 是一系列控制各个 cmets 的按钮（回复、引用、编辑、关闭等）。关闭按钮是我正在尝试编写此脚本的目的。我需要它来切换“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();
});

这会爬到包裹.trigger的<li>，然后在其中查找那些div。

你之前的，像这样：$("div.gravatar")，搜索所有<div class="gravatar">，而不是只在某个元素内，这就是上面的代码将改变的地方。

Answer 2

为什么不直接隐藏完整的 div.trigger 呢？ ^^ 好吧，也许这对你不起作用...... 你可以这样做

$("div.trigger").click(function() {
    $("div.trigger > div").slideToggle();
});

这将隐藏 div.trigger 下的所有 div