【发布时间】：2012-04-23 18:05:27
【问题描述】：
我正在实现这个：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');
});
默认情况下，我打算下拉的 cmets 不显示，并且像示例链接所示的那样用 css 隐藏，因为默认情况下为每个用户加载所有 cmets 是不明智的。
它们只会在点击“显示全部”链接/提交时加载。无论如何，在下面的代码中，我的 cmets 在页面上呈现后是从文件“show_all_cmets”中获取的。在该文件中有一个循环，它遍历每个评论并显示数据及其 html。
我想做的事：
我不想在页面上呈现它，但是在内存中如何能够访问这些类，就好像我试图从实际页面访问它们一样。这样我就可以访问每个 cmets 类并与 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 %>");
【问题讨论】：
-
坦率地说，我不明白你想要做什么，或者你想要从中获得什么。你不能隐藏元素吗？ jQuery 可以像任何其他元素一样访问它们，但用户无法看到它们或与它们交互。
-
完成。我过去总是发布代码，但后来我让某些用户总是请求 JSFiddle 链接。以后我会同时发布。
-
@LondonGuy：很好。问题中的代码是必要的。 JSFiddle 链接（或我的偏好，jsbin.com）是一个不错的选择，但非常nice 很不错。 :-)
-
Juhana：想象一个用户有一个 4000 cmets 的微博。每次用户进入带有该微博的页面时，都会从数据库中加载所有 4000 个 cmets，然后将其隐藏。即使用户没有点击显示全部链接。那不是我想做的事。想象一下有 1000 名用户查看该微博。这意味着 4000 cmets 被加载然后隐藏 1000 次，无论用户是否点击全部显示。
-
@LondonGuy：既然如此，我可能不会加载我根本不会显示的 cmets。当用户单击“更多”链接时，触发 ajax 请求以检索附加的 cmets。只是将它们从 HTML 移动到 JavaScript 并不会产生太大的影响。
标签： javascript jquery jquery-selectors