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

【问题标题】：How to override style using document.getElementsByClassName with onclick function如何使用带有 onclick 函数的 document.getElementsByClassName 覆盖样式
【发布时间】：2016-08-31 21:39:09
【问题描述】：

我正在尝试制作像 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 吗？
谢谢。

【问题讨论】：

你能在 jsfiddle 中发布你的代码
OP 说他不想使用 Isotope.js，是什么让每个人都认为他想要使用 jQuery？
因为他没说不想用jquery
所以因为用户没有指定jQuery的用法，他就自动想要了？仅此任务不需要导入 jQuery，我不同意每个人都需要为此涉及整个库。
@Roberrrt 这就是为什么我们告诉/建议他可以使用 jquery 而不是必须

标签： javascript jquery html css

【解决方案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>

【讨论】：

【解决方案2】：

正如我正确理解的那样，您可以使用 "display: none" 并使用

创建 css 类

类列表

用它来操作。纯 JS。

【讨论】：

【解决方案3】：

function showcatweb() {

  var webs = document.getElementsByClassName('web');
  for (var i = 0; i < webs.length; i++) {
    var imgCnr = webs[i];
    imgCnr.style.display = 'block'; //to hide, imgCnr.style.display = 'none';
  }

}

如果你不想使用 Jquery

【讨论】：

【解决方案4】：

用jquery试试更简单，用vanilla的时候需要扫描数组tith dom元素

仅调用函数
用函数类设置参数
全部隐藏，只显示您需要的内容

function show(cat){
//hide alll
  $(".web ,.all, .mobile,.graphics").hide()
  
  var categorySearch = "." + cat;
  
  var domElements = document.querySelectorAll(categorySearch);
  //show only category
  $(categorySearch).show()
  
  

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<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="show('all')">All</a>
                <a href="#" class="cat-inner" onclick="show('web')">Web</a>
                <a href="#" class="cat-inner" onclick="show('mobile')">Mobile</a>
                <a href="#" class="cat-inner" onclick="show('graphics')">Graphics</a>
            </div>
        </div>
        <div id="Portfolio" class="col l12 m12 s12">
            <div id="PortfolioItem" class="col l4 web all"><img src="http://lorempicsum.com/futurama/350/200/1" class="portfolio-img"></div>
            <div id="PortfolioItem" class="col l4 mobile web"><img src="http://lorempicsum.com/futurama/350/200/2" class="portfolio-img"></div>
            <div id="PortfolioItem" class="col l4 graphics web"><img src="http://lorempicsum.com/futurama/350/200/3" class="portfolio-img"></div>
            <div id="PortfolioItem" class="col l4 graphics mobile"><img src="http://lorempicsum.com/futurama/350/200/4" class="portfolio-img"></div>
            <div id="PortfolioItem" class="col l4 graphics"><img src="http://lorempicsum.com/futurama/350/200/5" class="portfolio-img"></div>
            <div id="PortfolioItem" class="col l4 web"><img src="http://lorempicsum.com/futurama/350/200/6" class="portfolio-img"></div>
            <div id="PortfolioItem" class="col l4 mobile"><img src="http://lorempicsum.com/futurama/350/200/7" class="portfolio-img"></div>
            <div id="PortfolioItem" class="col l4 graphics web"><img src="http://lorempicsum.com/futurama/350/200/8" class="portfolio-img"></div>
            <div id="PortfolioItem" class="col l4 web mobile"><img src="http://lorempicsum.com/futurama/350/200/9" class="portfolio-img"></div>
        </div>

【讨论】：

谢谢..我已经找到了上面的解决方案... :)

【解决方案5】：

我建议您使用 jquery 并执行以下操作：

$(document).ready(function() {
   $('.portfolio-img').click(function() {
      $('.portfolio-img').css('display', 'none');
   });
});

或者像这样使用jquery的隐藏功能：

$(document).ready(function() {
   $('.portfolio-img').click(function() {
      $('.portfolio-img').hide();
   });
});

我为你创建了一个有效的 sn-p：https://jsfiddle.net/m0o9u8u1/

【讨论】：

感谢您的努力

【解决方案6】：

好吧，你应该很擅长使用一个函数，所以首先，在你的 HTML 中：

<div class="col l4 m6 s12 offset-l4 offset-m3" id="Categories">
    <a class="cat-inner" href="#" onclick="show('all')">All</a>
    <a class="cat-inner" href="#" onclick="show('web')">Web</a>
    <a class="cat-inner" href="#" onclick="show('mobile')">Mobile</a>
    <a class="cat-inner" href="#" onclick="show('graphics')">Graphics</a>
</div>

（由 Kirmayr Tomaz 慷慨提供）。

其次，用你提供的参数在 javascript 中创建一个函数：

function show(className) {
    // Select and hide all items
    var all = document.querySelectorAll('.list-item');
    for (var i = 0; i < all.length; i++) {
        all[i].style.display = 'none';
    }

    // Display selected items
    var selection = document.querySelectorAll('.' + className);
    for (var j = 0; j < selection.length; j++) {
        selection[j].style.display = 'block';
    }
}

A working codepen example can be found here

对您的代码的一般反馈：

看来您正在使用引导程序来设置页面样式，您使用的类缺少引导程序使用的连字符，因此在引导程序中命名您的类的正确方法是：

col l4 m6 s12 -> col-lg-4 col-md-6 col-xs-12

您多次使用“PortfolioItem”这个想法。 id 不应该在一个页面上多次使用。你应该用它创建一个类，并命名为portfolio-item 或类似的名称。
将您的 javascript 包含在一个单独的文件中，最好将 HTML、CSS 和 `JavaScript 放在自己的文件中。

【讨论】：

如果对给出正常反馈的答案（包括对确切问题的答案）投反对票是正常的，请解释其背后的原因。