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