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

Question

因此，我一直在尝试创建一个JavaScript过滤系统，该系统根据单击的按钮/链接隐藏和显示DIV。 我的按钮使用我的JavaScript函数filterAll()，filter1()，filter2()和filter3()。我已经在另一个HTML文档中进行了一些测试，只是为了使其在更简单的文档中工作，但它仅适用于ID，不适用于类名。

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

我的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";
}

Answer 1

正如塞巴斯蒂安·奥尔森（Sebastian Olsen）在评论中所述，getElementsByClassName返回节点列表，而不是单个元素，因此您可以将其视为元素数组。要对这些元素进行处理，您应该从此数组中选择元素，例如g[index]。例如，您可以通过常规的for循环遍历此元素数组，因此您的filterAll方法应如下所示：

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

Answer 2

如何使用document.getElementsByClassName?

访问一个或多个元素

由于document.getElementsByClassName()返回带有受影响元素的NodeList，这只是类名的集合，因此您可以使用indexing（其中indexing开始0）或仅使用for循环。

带有for循环的示例

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

带有索引的示例

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

请注意，for loop方法为每个元素添加了一种样式display: block属性，而indexing method仅将样式应用于具有给定索引。

参考

W3C Schools' article about document.getElementsByClassName

Answer 3

遍历每个元素：

import timeit
import random

for n in range(10, 20):
    ls = list(range(n))
    dic = {j: None for j in ls}
    x1 = timeit.Timer("del ls[random.randrange(len(ls))]", "from __main__ import random,ls")   # delete random
    x2 = timeit.Timer("del dic[random.choice(dic.keys())]", "from __main__ import random,dic")
    print(x1.timeit(n) - x2.timeit(n)) # Will work for numbers upto n

Answer 4

我使用W3Schools.com的示例修复了该问题： https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

我重写的代码是：

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";
  }
}

我正在做的是“遍历”具有相应类名的每个元素，更改显示的值（请参阅链接中的更多信息）。

Answer 5

我不是每次都编写一个循环，而是使用一个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 p-b-50 grid-item bolcher shot diverse" 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>

还要注意，您的过滤器div包含类shots和misc，根据您的JavaScript，其应该分别为shot和diverse。 （或者更改javascript中的名称，无论如何）

我还纠正了一个事实，即您的问题在s函数中使用了m而不是filterMisc。