如何使用document.getElementsByClassName上用onclick功能

我努力使图像过滤器像覆盖风格isotope.js，因为我不能，我不希望使用Isotope.js。
问题是onclick函数不能与document.getElementsByClassName（）;
我想要做的是，当我点击一个带有onclick函数的链接时，函数应该将其他类的样式设置为display：none; 这里是我的HTML：如何使用document.getElementsByClassName上用onclick功能

<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呢？
谢谢。

来源

2016-08-31 Zaryab Waseem

你能张贴在的jsfiddle – utdev

OP代码表示，他不希望使用Isotope.js，让每个人都觉得他** **要使用jQuery？ – Roberrrt

因为他没有说任何关于不想使用jQuery的内容 – utdev

我的建议是：

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

来源

2016-08-31 13:26:06 gaetanoM

它的工作原理...谢谢... –

-1

我会建议你使用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/

来源

2016-08-31 12:59:01 utdev

感谢您的努力 –

我没有投票答复你的答案。 –

正如我正确理解，您可以创建css类与“display：none”，并使用

班级名册

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

来源

2016-08-31 12:59:48 Sasha

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

来源

2016-08-31 13:08:37

我已经尝试过这一点...它不适合我... –

尝试用jQuery是更简单，当你使用香草，你需要扫阵列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>

来源

2016-08-31 13:09:41

显示示例图像，它更好的眼睛:) – utdev

哈哈谢谢，我改变图像 –

谢谢..我已经找到了上述解决方案。 .. :) –

-1

好吧，你要善于用这个单一的功能，所以首先，在你的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

一般反馈：

看样子你'使用bootstrap来设置你的页面风格，你使用的类缺少bootstrap正在使用的连字符，所以一个正确的方法在引导命名你的类将是：

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

您正在使用的想法 'PortfolioItem' 多次。 id不应该在页面上多次使用。你应该从中做出一堂课，并将其称为portfolio-item或类似的东西。
将您的JavaScript包含在一个单独的文件中，这是一种很好的做法，可以在自己的文件中传播HTML,CSS和JavaScript。

来源

2016-08-31 13:33:50 Roberrrt

如果downvoting回答，给出正常的反馈，包括对确切问题的答案是正常的，比请解释它背后的推理。 – Roberrrt

如何使用document.getElementsByClassName上用onclick功能

回答

相关问题