注释切换按钮打开多个评论

问题描述：

我有此脚本显示/隐藏在我的博客的主页面的评论： albertosotophotography

I have this script for show/hide comments in the "main" page of my blog: albertosotophotography

<script type= "text/javascript">
    // Show/Hide Comments
    jQuery(document).ready(function() {

        // Get #comments div
        var uniqueAppend = 1;
        var tempName = 'comments';
        while(jQuery("#comments").length > 0 ){
            jQuery("#comments").attr('id',tempName + uniqueAppend++).addClass('commentContainer')
        }
        var commentsDiv = jQuery('.commentContainer');

        // Only do this work if that div isn't empty
        if (commentsDiv.length) {

        // Hide #comments div by default
        jQuery(commentsDiv).hide();

        // Append a link to show/hide
        jQuery('<a/>')
            .attr('class', 'toggle-comments')
            .attr('href', '#')
            .html('Notes')
            .insertAfter(commentsDiv);

        // Encase button in .toggle-comments-container div
        jQuery('.toggle-comments').wrap(jQuery('<div/>', {
            class: 'toggle-comments-container'
        }))     

        // When show/hide is clicked
      jQuery('.toggle-comments').on('click', function(e) {
            e.preventDefault();


        // Show/hide the div using jQuery's toggle()

        var commentContainer = jQuery(this).parent('.toggle-comments-container').siblings('.commentContainer');

        jQuery(commentContainer).fadeToggle('slow', function() {

            // change the text of the anchor
            var anchor = jQuery(commentContainer).siblings('.toggle-comments-container').children('.toggle-comments');
    var anchorText = anchor.text() == 'Notes' ? 'Hide' : 'Notes';
            jQuery(anchor).html(anchorText);

        });
        });

        } // End of commentsDiv.length

    }); // End of Show/Hide Comments
    </script>

问题是，当我preSS的按钮，同时打开所有帖子评论。
我想打开我preSS按钮的唯一的意见。
我会很感激，如果有人能帮助我。
感谢和问候。

The problem is when i press the button open all posts comments at the same time. I want open only the comments of the button that i press. I would be very grateful if someone can help me. Thanks and best regards.

阿尔贝托

答

在以下几行更改选择将解决您的问题 -

Changing the selectors in the following lines will fix your issue-

的问题的

var commentContainer = jQuery(this).parent('.toggle-comments-container').siblings('.commentContainer');
var anchor = jQuery(commentContainer).siblings('.toggle-comments-container').children('.toggle-comments');

的解决方法的

var commentContainer = jQuery(this).parent().prev();
var anchor = jQuery(commentContainer).next().children('.toggle-comments');

问题是与使用 .siblings的（）有同一类名的所有元素相匹配，从而选择所有的注释节点。

还使用的slideToggle 而不是 fadeToggle 可能给你带来更好的视觉体验的（这一行仅仅是一个设计建议。不相关的答案）的

The problem is with the use of .siblings() which matches all elements with the same class name and thus selects all your comment nodes.

Also using slideToggle instead of fadeToggle might give you a better visual experience (This line is just a design suggestion. Not related to the answer)

注释切换按钮打开多个评论

相关推荐