在javascript中计算并显示最新的博客文章

问题描述 投票：0回答：4

什么是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>
javascript html sorting dynamic-html
4个回答
1
投票

你不需要脚本。你可以用CSS做它..我已经改变你的html一点点（在html中制作posts-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/

0
投票

$('.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>
0
投票

试试这个：

<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变量选择要显示的帖子数。

如果有效，请告诉我。问候。

0
投票

我解释你的问题的方式，你需要一种方法：

  • 只显示前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);

showOnly

此函数首先获取必须管理其可见性的元素列表：

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';

publishPost

此函数首先显示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);
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.