javascript - 如何使用带有 onclick 函数的 document.getElementsByClassName 覆盖样式

Question

我正在尝试制作像 isotope.js 这样的图像过滤器，因为我不能也不想使用 Isotope.js。
问题是 onclick 函数不适用于 document.getElementsByClassName();
我想要做的就是当我点击带有 onclick 函数的链接时，该函数应该将其他类的样式设置为 display:none;这是我的 HTML:

<div id="CategoriesContainer" class="col l12 m12 s12">
            <div id="Categories" class="col l4 m6 s12 offset-l4 offset-m3">
                <a href="#" class="cat-inner" onclick="showcatall()">All</a>
                <a href="#" class="cat-inner" onclick="showcatweb()">Web</a>
                <a href="#" class="cat-inner" onclick="showcatmobile()">Mobile</a>
                <a href="#" class="cat-inner" onclick="showcatgraphics()">Graphics</a>
            </div>
        </div>
        <div id="Portfolio" class="col l12 m12 s12">
            <div id="PortfolioItem" class="col l4 web all"><img src="Images/web1.jpg" class="portfolio-img"></div>
            <div id="PortfolioItem" class="col l4 mobile web"><img src="Images/web2.jpeg" class="portfolio-img"></div>
            <div id="PortfolioItem" class="col l4 graphics web"><img src="Images/web3.jpg" class="portfolio-img"></div>
            <div id="PortfolioItem" class="col l4 graphics mobile"><img src="Images/graphics1.jpg" class="portfolio-img"></div>
            <div id="PortfolioItem" class="col l4 graphics"><img src="Images/graphics2.jpg" class="portfolio-img"></div>
            <div id="PortfolioItem" class="col l4 web"><img src="Images/web1.jpg" class="portfolio-img"></div>
            <div id="PortfolioItem" class="col l4 mobile"><img src="Images/graphics2.jpg" class="portfolio-img"></div>
            <div id="PortfolioItem" class="col l4 graphics web"><img src="Images/graphics1.jpg" class="portfolio-img"></div>
            <div id="PortfolioItem" class="col l4 web mobile"><img src="Images/web2.jpeg" class="portfolio-img"></div>
        </div>

有人可以为此推荐我 Javascript 吗？
谢谢。

Answer 1

我的建议是:

// on DOMContentLoaded
window.addEventListener('DOMContentLoaded', function (e) {
  // get all "cat-inner" elements and attach the click handler
  Array.prototype.slice.call(document.getElementsByClassName('cat-inner')).forEach(function (ele, index) {
    ele.addEventListener('click', function (e) {
      e.preventDefault();
      
      // get the current text content of the anchor
      var txt = this.textContent.toLowerCase();

      // for each children element set the appropriate visibility
      Array.prototype.slice.call(document.getElementById('Portfolio').children).forEach(function (ele, index) {
        switch (txt) {
          case 'all':
            ele.style.display = 'block';
            break;
          default:
            if (ele.className.indexOf(txt) != -1) {
              ele.style.display = 'block';
            } else {
              ele.style.display = 'none';
            }
            break;
        }
      });
    });
  });
});

<div id="CategoriesContainer" class="col l12 m12 s12">
  <div id="Categories" class="col l4 m6 s12 offset-l4 offset-m3">
    <a href="#" class="cat-inner">All</a>
    <a href="#" class="cat-inner">Web</a>
    <a href="#" class="cat-inner">Mobile</a>
    <a href="#" class="cat-inner">Graphics</a>
  </div>
</div>
<div id="Portfolio" class="col l12 m12 s12">
  <div id="PortfolioItem1" class="col l4 web all">All<img src="Images/web1.jpg" class="portfolio-img"></div>
  <div id="PortfolioItem2" class="col l4 mobile web">Web<img src="Images/web2.jpeg" class="portfolio-img"></div>
  <div id="PortfolioItem3" class="col l4 graphics web">Web<img src="Images/web3.jpg" class="portfolio-img"></div>
  <div id="PortfolioItem4" class="col l4 graphics mobile">Mobile<img src="Images/graphics1.jpg" class="portfolio-img"></div>
  <div id="PortfolioItem5" class="col l4 graphics">Graphics<img src="Images/graphics2.jpg" class="portfolio-img"></div>
  <div id="PortfolioItem6" class="col l4 web">Web<img src="Images/web1.jpg" class="portfolio-img"></div>
  <div id="PortfolioItem7" class="col l4 mobile">Mobile<img src="Images/graphics2.jpg" class="portfolio-img"></div>
  <div id="PortfolioItem8" class="col l4 graphics web">Web<img src="Images/graphics1.jpg" class="portfolio-img"></div>
  <div id="PortfolioItem9" class="col l4 web mobile">Mobile<img src="Images/web2.jpeg" class="portfolio-img"></div>
</div>