什么是javascript，以便仅按顺序显示帖子3和4??? 我也需要它是动态的，所以如果我放第 5 个帖子，它只会显示第 4 个和第 5 个帖子......我在考虑诸如日期函数或简单的增量器之类的东西，但似乎无法弄清楚。我是javascript的新手，一直在尝试不同的东西，但无济于事......提前感谢...
<!DOCTYPE html>
<html>
<body>
<div id="posts-div">
<h1 class="post-title">post4</h1>
<p class="post">post4</p>
</div>
<div id="posts-div">
<h1 class="post-title">post3</h1>
<p class="post">post3</p>
</div>
<div id="posts-div">
<h1 class="post-title">post2</h1>
<p class="post">post2</p>
</div>
<div id="posts-div">
<h1 class="post-title">post1</h1>
<p class="post">post1</p>
</div>
<script>
// ???
</script>
</body>
</html>
你不需要脚本。你可以用CSS来做。我已经稍微改变了你的html(在html中制作了post-div类(。
.posts-div{
display:none;
}
.posts-div:nth-child(-n+2) {
display:block;
}<!DOCTYPE html>
<html>
<body>
<div class="posts-div">
<h1 class="post-title">post5</h1>
<p class="post">post5</p>
</div>
<div class="posts-div">
<h1 class="post-title">post4</h1>
<p class="post">post4</p>
</div>
<div class="posts-div">
<h1 class="post-title">post3</h1>
<p class="post">post3</p>
</div>
<div class="posts-div">
<h1 class="post-title">post2</h1>
<p class="post">post2</p>
</div>
<div class="posts-div">
<h1 class="post-title">post1</h1>
<p class="post">post1</p>
</div>
<script>
// ???
</script>
</body>
</html>你也可以在JSfiddle上测试它.. https://jsfiddle.net/nimittshah/b5eL3ykx/6/
$('.posts-div:gt(1)').hide()<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<div class="posts-div">
<h1 class="post-title">post4</h1>
<p class="post">post4</p>
</div>
<div class="posts-div">
<h1 class="post-title">post3</h1>
<p class="post">post3</p>
</div>
<div class="posts-div">
<h1 class="post-title">post2</h1>
<p class="post">post2</p>
</div>
<div class="posts-div">
<h1 class="post-title">post1</h1>
<p class="post">post1</p>
</div>
</body>试试这个：
<script>
document.addEventListener("DOMContentLoaded", function () {
var allPosts = document.querySelectorAll(".posts-div");
// This is the number of posts you want displayed
var numberOfPostsToShow = 2;
for (var i = 0; i < allPosts.length; i++) {
if(i > numberOfPostsToShow - 1) {
allPosts[i].style.display = "none";
}
}
});
</script>
这样，您将选择要使用numberOfPostsToShow变量显示的帖子数量。
让我知道这是否有效。问候。
我解释你的问题的方式，你需要一种方法：
- 仅显示前 n 个元素;
- 动态地将新元素添加到帖子列表的顶部;
- 添加它们时，请更新可见元素。
假设代码的版本略有修改，它纠正了 id/class 问题并为所有帖子添加一个容器(这次使用正确的 id(：
<!DOCTYPE html>
<html>
<body>
<div id="posts-container">
<div class="posts-div">
<h1 class="post-title">post4</h1>
<p class="post">post4</p>
</div>
<div class="posts-div">
<h1 class="post-title">post3</h1>
<p class="post">post3</p>
</div>
<div class="posts-div">
<h1 class="post-title">post2</h1>
<p class="post">post2</p>
</div>
<div class="posts-div">
<h1 class="post-title">post1</h1>
<p class="post">post1</p>
</div>
</div>
<script>
// ???
</script>
</body>
</html>
此代码将解决问题并管理帖子可见性的添加和更新：
function showOnly(visible, query){
var elements = document.querySelectorAll(query);
for (var i = 0; i < elements.length; i++){
if (i < visible - 1){
elements[i].style.display = 'block';
} else {
elements[i].style.display = 'none';
}
}
}
function publishPost(element, visible){
showOnly(visible, '#posts-container .posts-div')
var elements = document.querySelectorAll('#posts-container .posts-div');
element.style.display = 'block';
if (elements.length > 0) {
document.querySelector('#posts-container').insertBefore(element, elements[0]);
} else {
document.querySelector('#posts-container').appendChild(element);
}
}
showOnly 函数(使用要显示的元素数和使用 querySelectorAll 标识元素的字符串进行调用(将仅使字符串标识的前 n 个元素可见。如果需要，您可以独立于其余代码使用它。
另一方面，publishPost 函数严格依赖于上面修改后的 html(要在其他地方使用它，您需要调整提供给 querySelector 和 querySelectorAll 的字符串(。它将要发布的元素作为第一个参数，将需要可见的元素数作为第二个参数。然后，它会更新新帖子之前的帖子列表，并且还会更新哪些帖子可见。
这是一个使用它的代码示例：
var elDiv = document.createElement('div');
var elH1 = document.createElement('h1');
var elP = document.createElement('p');
elDiv.classList = 'posts-div';
elH1.classList = 'post-title';
elP.classList = 'post';
elH1.innerText = 'some title';
elP.innerText = 'some text for the post';
elDiv.appendChild(elH1).appendChild(elP);
publishPost(elDiv, 2);
仅显示
此函数首先获取必须管理其可见性的元素列表：
var elements = document.querySelectorAll(query);
然后，它遍历列表并检查每个元素：
for (var i = 0; i < elements.length; i++){
如果它必须可见，它将 style.display 属性设置为"block"：
if (i < visible){
elements[i].style.display = 'block';
否则，它会将其设置为"隐藏"：
else {
elements[i].style.display = 'none';
发布帖子
此函数首先仅显示 n-1 个元素(因为它需要在列表顶部添加一个新的可见元素(：
showOnly(visible - 1, '#posts-container .posts-div')
然后它检索当前帖子：
var elements = document.querySelector('#posts-container .posts-div');
它使新元素可见：
element.style.display = 'block';
最后，它将元素添加到列表顶部(不同的语法取决于列表是否为空(：
if (elements.length > 0) {
document.querySelector('#posts-container').insertBefore(element, elements[0]);
} else {
document.querySelector('#posts-container').appendChild(element);
}