Question

我有这个脚本用于在＆＃34; main＆＃34;中显示/隐藏评论。我的博客页面：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>

问题是我按下按钮同时打开所有帖子评论。我只想打开我按下的按钮的注释。如果有人可以帮助我，我将非常感激。谢谢和最好的问候。

阿尔贝托

Answer 1

更改以下行中的选择器将解决您的问题 -

问题

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可能会为您提供更好的视觉体验（此行只是一个设计建议。与答案无关）

注释切换按钮可打开多个注释

1 个答案: