如何对具有多个类的div /帖子进行排序？

Question

我想为我的博客帖子创建标签系统。 如果单击相应的标签，则它应仅显示包含此标签的帖子，而隐藏其余标签。 因此，我尝试编写一个onClick函数，但失败了。 为什么？

这是帖子的HTML：

<div class="post lorem">
  <div class="postTitle">
    <h1>Lorem</h1>
  </div>
  <div class="postInfo">Tags: <a onClick="sortPosts('lorem');">Lorem</a></div>
  <div class="postText">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>

<div class="post ipsum dolar">
  <div class="postTitle">
    <h1>Ipsum dolar</h1>
  </div>
  <div class="postInfo">Tags: <a onClick="sortPosts('ipsum');">Ipsum</a> · <a onClick="sortPosts('dolar');">Dolar</a></div>
  <div class="postText">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>

<div class="post dolar">
  <div class="postTitle">
    <h1>Dolar</h1>
  </div>
  <div class="postInfo">Tags: <a onClick="sortPosts('dolar');">Dolar</a></div>
  <div class="postText">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>

CSS：

.post {
  width: 90%;
  padding: 5%;
  font-family: sans-serif;
}

.postInfo {
  font-style: italic;
  margin-bottom: 20px;
}

使用Javascript：

function sortPosts(tag) {
  if (document.getElementsByClassName('.post tag)')) {
    show();
  } else {
    hide();
  }
}

一起摆弄 ……

Answer 1

您必须使用以下内容

var elements = document.getElementsByClassName('.post ' + tag );

现在，如果有任何匹配的元素，您将遍历它们并将其style.display属性设置为none。

注意：使用jQuery ;-)可能会容易得多。