0

クリックするとコメントを表示および非表示にするshowandhiddendivがあります。デフォルトでは、クリックする前に、メッセージ数といくつかの下向き矢印が表示されます。

「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ヘルパーやインスタンス変数などにアクセスできないため、コメントアカウントに戻す方法がわかりません。

コードは次のとおりです（assets / 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は、コンテンツをJavaScriptとして出力する前に、ERbでアセットを前処理します。

詳細については、アセットパイプラインでの前処理に関するRailsガイドを確認してください。

于 2012-04-22T12:55:36.017 に答える