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

正如我所理解的，您可以使用 ＆＃34; display：none＆＃34; 并使用

创建css类

classList

用它来操纵。它是纯粹的JS。

Answer 2

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

Answer 3

我的建议是：

// 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>

Answer 4

尝试使用jquery更简单，当你使用vanilla时，你需要扫描数组tith dom元素

仅限通话功能
使用功能类
隐藏全部并仅显示您需要

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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();
   });
});

我为您创建了一个工作代码段：https://jsfiddle.net/m0o9u8u1/

Answer 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 - ＆gt; col-lg-4 col-md-6 col-xs-12

您正在使用这个想法＆＃39; PortfolioItem＆＃39;多次。 id不应该在页面上多次使用。你应该从中创建一个类，并将其命名为portfolio-item或类似的东西。
将您的javascript包含在单独的文件中，将HTML，CSS和`JavaScript传播到自己的文件中是一种很好的做法。

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

6 个答案: