私はこれを実装しています：http：//jsfiddle.net/xkfqN/85/
html：
<div id="posts">
<div class="more">Show More</div>
<div class="commentsContainer">
<div class="comment">Comment 1</div>
<div class="comment">Comment 2</div>
<div class="comment">Comment 3</div>
<div class="comment">Comment 4</div>
<div class="comment">Comment 5</div>
<div class="comment">Comment 6</div>
<div class="comment">Comment 7</div>
<div class="comment">Comment 8</div>
<div class="comment">Comment 9</div>
<div class="comment">Comment 10</div>
</div>
</div>
css：
.comment {
display: none;
border:3px solid whiteSmoke;
width:280px;
}
.more {
cursor:pointer
}
JQuery：
function toggleComment(index, hide) {
//check the index to make sure it is in range
if (index > -1 && $('.comment').length > index) {
//get the comment at the given index and apply the animation
$('.comment:eq(' + index + ')')
.slideToggle(18, function() {
//if hiding then decrement
var next = hide ? index + 1 : index - 1;
//call toggle on the next index
toggleComment(next , hide);
});
//set to display block so they show up on their own line
// .css('display', 'block');
}
}
$('.more').click(function() {
//are the comments already open... returns true or false
var hide = $(this).hasClass('open');
//default to start at the begining... each click brings the index to 0
var index = 0;
//if the comments are not open then start at the end
if (!hide) {
index = $('.comment').length - 1
}
//toggle the comments
toggleComment(index, hide);
//used to remember state.. adds class to more and takes it away hence toggle class
$(this).toggleClass('open');
});
</ p>
ドロップダウンする予定のコメントは、デフォルトでは表示されず、例のリンクが示すようにcssで非表示になります。これは、すべてのユーザーに対してデフォルトですべてのコメントをロードするのは賢明ではないためです。
これらは、「すべて表示」リンク/送信をクリックしたときにのみロードされます。とにかく、以下のコードでは、私のコメントは、ページにレンダリングされた後、ファイル「show_all_comments」から取得されます。そのファイルには、各コメントをループし、そのhtmlとともにデータを表示するループがあります。
私がやりたいこと：
これをページに表示したくありませんが、実際のページからクラスにアクセスしようとしているかのように、メモリ内でクラスにアクセスできるようになります。このようにして、各コメントクラスにアクセスし、JSFiddleコードで使用できるようになります。
それがあなたにとって理にかなっているなら、これは可能ですか？もしそうなら、私はこれをどのように達成しますか？
JQuery：
var postContent = $(this).parents('.post_content'),
commentContainer = postContent.find('.comment_container');
commentContainer.slice(0, -2).remove();
postContent.find('.comment_container:first')
.before("<%= j render 'users/partials/show_all_comments', :comments => @comments %>");