0

我有一个显示和隐藏 div，单击时显示和隐藏评论。默认情况下，在单击之前它会显示消息计数以及一些向下箭头，例如

“55 条评论 [向下箭头]”

当点击它变为：

“隐藏评论 [向上箭头]”

我使用此代码默认显示评论数量和箭头（用户/新）：

    <span class="commentsCount"><%= pluralize(m.comments.count, 'comment') %></span>
    <span class="commentArrows"><%= image_tag 'view_all_comments.png' %> </span>

我使用 JQuery 来帮助实现更改（users/load_comments.js.erb）：

$('.postHolder').off().on('ajax:success', '.view_all_comments', function(){

    var postContent = $(this).parents('.post_content'),
        commentContainer = postContent.find('.comment_container'),
        getComments = "<%= j render 'users/partials/show_all_comments' %>";
        commentContainer.slice(0, -2).remove();

// The next 2 lines replace the comment count with "Hide comments" and up arrows"

          postContent.find('.commentsCount').html("Hide comments");
          postContent.find(".commentArrows img").prop("src", "/assets/up_arrows.png");

             postContent.find('.comment_container:first').before(getComments);
});

现在重要的部分是再次单击隐藏评论时。我需要它恢复显示评论计数。我可以将箭头恢复为原始箭头，但文本我看不到恢复评论帐户的方法，因为我无法访问我的 assets/javascripts/users.js 文件中的 rails 助手和实例变量等。

这是代码（资产/javascripts/users.js：

    // for showing and hiding comments

        $('.expandComments').click(function() {

        var showAllCommentsSubmit = $(this).find('.showAllCommentsSubmit'),
            postContent = $(this).parents('.post_content'),
            commentContainer = postContent.find('.comment_container');


            if ($(this).hasClass('visible')) {
                postContent.find(".comment_container").slice(0, -1).hide();
                postContent.find(".commentArrows img").prop("src", "/assets/view_all_comments.png");

//Here is where I need the code to replace the "Hide comments" text.

            }  else {


                if (showAllCommentsSubmit.is(':disabled')) {
                    postContent.find(".comment_container").show();
                    postContent.find(".commentArrows img").prop("src", "/assets/hide_comments.png");

                } else {
                    showAllCommentsSubmit.trigger('submit');
                    showAllCommentsSubmit.prop({disabled: true});
                    postContent.find(".commentArrows img").prop("src", "/assets/comments-loader.gif");
                }
            }

            $(this).toggleClass('visible');

        });

由于我认为不可能在资产 javascript 文件中使用嵌入式 ruby​​ / rails 助手，我将如何实现我想要实现的目标。

有没有办法在其他html之上显示一些html，然后在不再需要它时将其删除，并再次显示下面的html？

我敢肯定还有其他一些我可以提出的解决方案，例如发挥一些 css 的作用.. 有一个 div 隐藏和显示，但我还没有想出我会如何做到这一点。想知道有没有快速的解决办法。

4

1 回答 1

1

您可以在资产代码中使用 Rails 助手。您基本上只需要将资产从 重命名users.js为users.js.erb，Rails 将使用 ERb 对其进行预处理，然后再将内容作为 JavaScript 发出。

有关详细信息，请查看有关资产管道中预处理的 Rails 指南。

于 2012-04-22T12:55:36.017 回答