堆栈内存溢出
  简体   繁体   English

基于按钮单击的JavaScript隐藏/显示DIV

[英]JavaScript hide/show DIVs based on button click

 原文  2018-07-10 09:50:39  7   5    javascript/ html

问题描述

So I've been trying to do a JavaScript filtering system, where it hides and shows DIVs based on what button/link is clicked. 因此，我一直在尝试创建一个JavaScript过滤系统，该系统会根据单击的按钮/链接隐藏和显示DIV。 My buttons use my JavaScript functions filterAll() , filter1() , filter2() and filter3() . 我的按钮使用我的JavaScript函数filterAll() ， filter1() ， filter2()和filter3() 。 I've done some testing in another HTML document, just to get it work in a simpler document, but it only works with IDs and not Class names. 我已经在另一个HTML文档中进行了一些测试，只是为了使其在更简单的文档中工作，但它仅适用于ID，而不适用于类名。

My HTML code: 我的HTML代码： 

    <div class="row animate-box grid" id="product-grid">
            <!-- LEFTBAR -->
            <div class="col-sm-6 col-md-4 col-lg-3 p-b-50 grid-item bolcher shots misc" id="leftbar">
                <div class="p-r-20 p-r-0-sm button-group button-group">
                    <!--  -->
                    <h4 class="m-text14 p-b-7" id="button-group-title-categories">
                        Kategorier
                    </h4>

                    <ul class="" id="leftbar-ul">
                        <li class="p-t-4" data-filter="*">
                            <a href="#" class="s-text13 active1 filter-button" onclick="filterAll()">
                                    Alle
                                </a>
                        </li>

                        <li class="p-t-4" data-filter=".bolcher">
                            <a href="#" class="s-text13" onclick="filterBolcher()">
                                    Bolcher
                                </a>
                        </li>

                        <li class="p-t-4" data-filter=".shots">
                            <a href="#" class="s-text13" onclick="filterShots()">
                                    Shots
                                </a>
                        </li>

                        <li class="p-t-4" data-filter=".misc">
                            <a href="#" class="s-text13" onclick="filterMisc()">
                                    Diverse
                                </a>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- PRODUCTS LISTING -->
                        <div id="product_sorting-id_1" class="col-sm-12 col-md-6 col-lg-4 p-b-50 grid-item bolcher">
                <!-- Block2 -->
                <div class="block2">
                    <div class="block2-img wrap-pic-w of-hidden pos-relative">
                        <img src="/images/products/bolcher/abrikos.jpg" alt="IMG-PRODUCT">
                    </div>

                    <div class="block2-txt p-t-20">
                        <p class="block2-name dis-block s-text3 p-b-5" id="product-id-1">
                                        Abrikos</p>
                    </div>
                </div>
            </div>
                      <div id="product_sorting-id_2" class="col-sm-12 col-md-6 col-lg-4 p-b-50 grid-item bolcher">
                <!-- Block2 -->
                <div class="block2">
                    <div class="block2-img wrap-pic-w of-hidden pos-relative">
                        <img src="/images/products/bolcher/althea.jpg" alt="IMG-PRODUCT">
                    </div>

                    <div class="block2-txt p-t-20">
                        <p class="block2-name dis-block s-text3 p-b-5" id="product-id-2">
                                        Althea</p>
                    </div>
                </div>
            </div>
                      <div id="product_sorting-id_3" class="col-sm-12 col-md-6 col-lg-4 p-b-50 grid-item bolcher">
                <!-- Block2 -->
                <div class="block2">
                    <div class="block2-img wrap-pic-w of-hidden pos-relative">
                        <img src="/images/products/bolcher/banan-Lakrids.jpg" alt="IMG-PRODUCT">
                    </div>

                    <div class="block2-txt p-t-20">
                        <p class="block2-name dis-block s-text3 p-b-5" id="product-id-3">
                                        Banan-Lakrids</p>
                    </div>
                </div>
            </div>
                      <div id="product_sorting-id_4" class="col-sm-12 col-md-6 col-lg-4 p-b-50 grid-item bolcher">
                <!-- Block2 -->
                <div class="block2">
                    <div class="block2-img wrap-pic-w of-hidden pos-relative">
                        <img src="/images/products/bolcher/banan.jpg" alt="IMG-PRODUCT">
                    </div>

                    <div class="block2-txt p-t-20">
                        <p class="block2-name dis-block s-text3 p-b-5" id="product-id-4">
                                        Banan</p>
                    </div>
                </div>
            </div>
                      <div id="product_sorting-id_5" class="col-sm-12 col-md-6 col-lg-4 p-b-50 grid-item bolcher">
                <!-- Block2 -->
                <div class="block2">
                    <div class="block2-img wrap-pic-w of-hidden pos-relative">
                        <img src="/images/products/bolcher/blaber.jpg" alt="IMG-PRODUCT">
                    </div>

                    <div class="block2-txt p-t-20">
                        <p class="block2-name dis-block s-text3 p-b-5" id="product-id-5">
                                        Blaber</p>
                    </div>
                </div>
            </div>
                      <div id="product_sorting-id_6" class="col-sm-12 col-md-6 col-lg-4 p-b-50 grid-item bolcher">
                <!-- Block2 -->
                <div class="block2">
                    <div class="block2-img wrap-pic-w of-hidden pos-relative">
                        <img src="/images/products/bolcher/champagnebrus.jpg" alt="IMG-PRODUCT">
                    </div>

                    <div class="block2-txt p-t-20">
                        <p class="block2-name dis-block s-text3 p-b-5" id="product-id-6">
                                        Champagnebrus</p>
                    </div>
                </div>
            </div>
</div>

My JavaScript code is: 我的JavaScript代码是： 

var g = document.getElementsByClassName("grid-item");
var b = document.getElementsByClassName("bolcher");
var s = document.getElementsByClassName("shot");
var m = document.getElementsByClassName("diverse");

function filterAll() {
  g.style.display="block";
}

function filterBolcher() {
  g.style.display="none";
  b.style.display="block";
}

function filterShots() {
  g.style.display="none";
  s.style.display="block";
}

function filterMisc() {
  g.style.display="none";
  s.style.display="block";
}

5 个解决方案

解决方案1
 2  2018-07-10 09:58:42

As Sebastian Olsen mentioned in comments, getElementsByClassName returns a node list, not single element, so you can think of it as about an array of elements. 就像塞巴斯蒂安·奥尔森（Sebastian Olsen）在评论中提到的那样， getElementsByClassName返回一个节点列表，而不是单个元素，因此您可以将其视为元素数组。 And to do something with these elements, you should pick the element from this array like g[index] . 为了对这些元素进行处理，您应该从此数组中选择元素，例如g[index] 。 You can iterate through this array of elements via regular for loop for example, so your filterAll method should look something like this: 例如，您可以通过常规的for循环遍历此元素数组，因此filterAll方法应如下所示： 

function filterAll() {
  for (var i = 0; i < g.length; i++) {
    g[i].style.display = "block";
  }
}

解决方案2
 1 已采纳  2018-07-10 10:05:04

How to access one or more element by using document.getElementsByClassName? 如何通过使用document.getElementsByClassName?访问一个或多个元素document.getElementsByClassName?

Since document.getElementsByClassName() returns a NodeList with the affected elements which is simply a collection of the class names, you can access it by using indexing (where the indexing starts with 0 ) or simply with a for loop. 由于document.getElementsByClassName()返回带有受影响元素的NodeList ，它只是类名的集合，因此您可以通过使用indexing （ indexing从0开始）或仅通过for循环来访问它。

Example with a for loop for循环示例 

var x = document.getElementsByClassName("example");
function function(){
    for (var i = 0; i < g.length; i++){
    x[i].style.display = "block";
  }
}

Example with indexing 索引示例 

var x = document.getElementsByClassName("example");
x[0].style.display = "block";

Note that the for loop method adds a style display: block property for every element, while the indexing method will only apply style for the element with the given index. 请注意， for loop方法为每个元素添加了样式display: block属性，而indexing method将仅对具有给定索引的元素应用样式。

Reference 参考

W3C Schools' article about document.getElementsByClassName W3C学校关于document.getElementsByClassName的文章

解决方案3
 0  2018-07-10 09:57:56

Iterate through each element: 遍历每个元素： 

 function filterAll() {
 for(i=0;i<g.length;i++)
 g[i].style.display="block";
}

解决方案4
 0  2018-07-10 10:07:26

I fixed it by using the example from W3Schools.com: https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp 我使用W3Schools.com上的示例修复了该问题： https : //www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

The code I've rewritten it to is: 我将其重写为以下代码： 

var g = document.getElementsByClassName("grid-item");
var b = document.getElementsByClassName("bolcher");
var s = document.getElementsByClassName("shot");
var m = document.getElementsByClassName("diverse");
var i;

function filterAll() {
  for (i = 0; i < g.length; i++) {
    g[i].style.display = "block";
  }
}

function filterBolcher() {
  for (i = 0; i < g.length; i++) {
    g[i].style.display = "none";
  }
  for (i = 0; i < b.length; i++) {
    b[i].style.display = "block";
  }
}

function filterShots() {
  for (i = 0; i < g.length; i++) {
    g[i].style.display = "none";
  }
  for (i = 0; i < s.length; i++) {
    s[i].style.display = "block";
  }
}

function filterMisc() {
  for (i = 0; i < g.length; i++) {
    g[i].style.display = "none";
  }
  for (i = 0; i < m.length; i++) {
    m[i].style.display = "block";
  }
}

What I'm doing is "going through" every element that has the corresponding class name, the changing the value of display (see more at the link). 我正在做的是“遍历”具有相应类名的每个元素，更改显示的值（请参阅链接中的更多信息）。

解决方案5
 0  2018-07-10 10:08:14

Instead of writing a loop everytime, I used a function and called that one: 我没有每次都编写循环，而是使用了一个function并将其称为： 

 var g = document.getElementsByClassName("grid-item"); var b = document.getElementsByClassName("bolcher"); var s = document.getElementsByClassName("shot"); var m = document.getElementsByClassName("diverse"); function filterAll() { applyDisplay(g, "block"); } function filterBolcher() { applyDisplay(g, "none"); applyDisplay(b, "block"); } function filterShots() { applyDisplay(g, "none"); applyDisplay(s, "block"); } function filterMisc() { applyDisplay(g, "none"); applyDisplay(m, "block"); } function applyDisplay(nodeList, display) { for (var i = 0; i<nodeList.length;i++){ var node = nodeList[i]; node.style.display = display; } } 
 <div class="row animate-box grid" id="product-grid"> <!-- LEFTBAR --> <div class="col-sm-6 col-md-4 col-lg-3 pb-50 grid-item bolcher shot diverse" id="leftbar"> <div class="pr-20 pr-0-sm button-group button-group"> <!-- --> <h4 class="m-text14 pb-7" id="button-group-title-categories"> Kategorier </h4> <ul class="" id="leftbar-ul"> <li class="pt-4" data-filter="*"> <a href="#" class="s-text13 active1 filter-button" onclick="filterAll()"> Alle </a> </li> <li class="pt-4" data-filter=".bolcher"> <a href="#" class="s-text13" onclick="filterBolcher()"> Bolcher </a> </li> <li class="pt-4" data-filter=".shots"> <a href="#" class="s-text13" onclick="filterShots()"> Shots </a> </li> <li class="pt-4" data-filter=".misc"> <a href="#" class="s-text13" onclick="filterMisc()"> Diverse </a> </li> </ul> </div> </div> <!-- PRODUCTS LISTING --> <div id="product_sorting-id_1" class="col-sm-12 col-md-6 col-lg-4 pb-50 grid-item bolcher"> <!-- Block2 --> <div class="block2"> <div class="block2-img wrap-pic-w of-hidden pos-relative"> <img src="/images/products/bolcher/abrikos.jpg" alt="IMG-PRODUCT"> </div> <div class="block2-txt pt-20"> <p class="block2-name dis-block s-text3 pb-5" id="product-id-1"> Abrikos</p> </div> </div> </div> <div id="product_sorting-id_2" class="col-sm-12 col-md-6 col-lg-4 pb-50 grid-item bolcher"> <!-- Block2 --> <div class="block2"> <div class="block2-img wrap-pic-w of-hidden pos-relative"> <img src="/images/products/bolcher/althea.jpg" alt="IMG-PRODUCT"> </div> <div class="block2-txt pt-20"> <p class="block2-name dis-block s-text3 pb-5" id="product-id-2"> Althea</p> </div> </div> </div> <div id="product_sorting-id_3" class="col-sm-12 col-md-6 col-lg-4 pb-50 grid-item bolcher"> <!-- Block2 --> <div class="block2"> <div class="block2-img wrap-pic-w of-hidden pos-relative"> <img src="/images/products/bolcher/banan-Lakrids.jpg" alt="IMG-PRODUCT"> </div> <div class="block2-txt pt-20"> <p class="block2-name dis-block s-text3 pb-5" id="product-id-3"> Banan-Lakrids</p> </div> </div> </div> <div id="product_sorting-id_4" class="col-sm-12 col-md-6 col-lg-4 pb-50 grid-item bolcher"> <!-- Block2 --> <div class="block2"> <div class="block2-img wrap-pic-w of-hidden pos-relative"> <img src="/images/products/bolcher/banan.jpg" alt="IMG-PRODUCT"> </div> <div class="block2-txt pt-20"> <p class="block2-name dis-block s-text3 pb-5" id="product-id-4"> Banan</p> </div> </div> </div> <div id="product_sorting-id_5" class="col-sm-12 col-md-6 col-lg-4 pb-50 grid-item bolcher"> <!-- Block2 --> <div class="block2"> <div class="block2-img wrap-pic-w of-hidden pos-relative"> <img src="/images/products/bolcher/blaber.jpg" alt="IMG-PRODUCT"> </div> <div class="block2-txt pt-20"> <p class="block2-name dis-block s-text3 pb-5" id="product-id-5"> Blaber</p> </div> </div> </div> <div id="product_sorting-id_6" class="col-sm-12 col-md-6 col-lg-4 pb-50 grid-item bolcher"> <!-- Block2 --> <div class="block2"> <div class="block2-img wrap-pic-w of-hidden pos-relative"> <img src="/images/products/bolcher/champagnebrus.jpg" alt="IMG-PRODUCT"> </div> <div class="block2-txt pt-20"> <p class="block2-name dis-block s-text3 pb-5" id="product-id-6"> Champagnebrus</p> </div> </div> </div> </div>

Also note that your filter div contains the classes shots and misc where it should be shot and diverse according to your javascript. 还要注意，您的过滤器div包含shots和misc类，应根据您的javascript对其进行shot和diverse 。 (or else change the names in the javascript, whatever) （或者更改javascript中的名称，无论如何）

I also corrected the fact that your question used s instead of m in the filterMisc function. 我还纠正了以下事实：您的问题在filterMisc函数中使用了s而不是m 。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何根据单选按钮单击显示和隐藏div？ - how to show and hide divs based on radio button click? 根据点击显示和隐藏多个 div - Show and Hide multiple Divs based on click 单击按钮显示/隐藏Divs：不能按预期工作？ - Show/Hide Divs on Button Click: Not working as expected? 单击按钮时显示和隐藏 div - Show and hide divs when click button 根据单选按钮选择显示/隐藏 div - Show/Hide divs based on radio button selection 在 Blogger 中，使用 javascript 基于按钮单击隐藏/显示视频元素 - In Blogger, Hide/Show video element based on button click with javascript 使用 javascript 基于按钮单击隐藏/显示视频元素 - Hide/Show video element based on button click with javascript 单击显示和隐藏div - Show and hide divs on click JavaScript显示/隐藏div - JavaScript show/hide divs 使用 JavaScript 显示/隐藏 DIV - Show / Hide DIVs with JavaScript
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM