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">而不是仅搜索某个元素，这就是上面的代码将会发生的变化。

Answer 2

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

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

这将隐藏div.trigger

下的所有div

JQuery＆amp; Wordpress - 在唯一ID中隐藏多个div？

2 个答案: