繁体   English   中英

单击按钮时如何创建过滤功能

[英]How to create a filtering function when button is clicked

这是一个学校作业,我使用 Javascript、HTML 和 CSS 来创建一个鞋类网站。 我在过滤商品时遇到了一些问题。 我希望用户能够点击一个类别,并为此触发过滤过程,但没有任何反应......

HTML:

<div id="myBtnContainer">
    <button class="btn active" onclick="filterSelection('all')"> Show all</button>
    <button class="btn" onclick="filterSelection('hiking')"> Hiking Shoes</button>
    <button class="btn" onclick="filterSelection('boots')"> Boots</button>
    <button class="btn" onclick="filterSelection('sneakers')"> Sneakers</button>
</div>

<div class="container">

    <div class="box3">
        <div class="col2 filterDiv hiking" id="cardImage">

            <!--<h2 class="shoe-name"></h2>
    <img class="shoe-picture"></img>
    <p class="price"></p>
    <p class="color"></p>

    <form action="sizeguide.html">
        <button class="btn-sizeguide">Find your size</button>
    </form>-->

        </div>
    </div>

    <div class="box3">
        <div class="col2 filterDiv boots" id="cardImage2">

            <!--<h2 class="shoe-name"></h2>
    <img class="shoe-picture"></img>
    <p class="price"></p>
    <p class="color"></p>

    <form action="sizeguide.html">
        <button class="btn-sizeguide">Find your size</button>
    </form>-->
        </div>
    </div>

    <div class="box3">
        <div class="col2 filterDiv sneakers" id="cardImage3">

            <!--<h2 class="shoe-name"></h2>
    <img class="shoe-picture"></img>
    <p class="price"></p>
    <p class="color"></p>

    <form action="sizeguide.html">
        <button class="btn-sizeguide">Find your size</button>
    </form>-->
        </div>
    </div>
</div>

Javascript:

//filter for product page
filterSelection("all")

function filterSelection(c) {
    var x, i;
    x = document.getElementsByClassName("filterDiv");
    if (c == "all") c = "";
    for (i = 0; i < x.length; i++) {
        removeClass(x[i], "show");
        if (x[i].className.indexOf(c) > -1) addClass(x[i], "show");
    }
}

function addClass(element, name) {
    var i, arr1, arr2;
    arr1 = element.className.split(" ");
    arr2 = name.split(" ");
    for (i = 0; i < arr2.length; i++) {
        if (arr1.indexOf(arr2[i]) == -1) {
            element.className += " " + arr2[i];
        }
    }
}

function removeClass(element, name) {
    var i, arr1, arr2;
    arr1 = element.className.split(" ");
    arr2 = name.split(" ");
    for (i = 0; i < arr2.length; i++) {
        while (arr1.indexOf(arr2[i]) > -1) {
            arr1.splice(arr1.indexOf(arr2[i]), 1);
        }
    }
    element.className = arr1.join(" ");
}

// Active class, clicked button 
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function() {
        var current = document.getElementsByClassName("active");
        current[0].className = current[0].className.replace(" active", "");
        this.className += " active";
    });
}

为什么单击按钮时什么也没有发生?

我编辑了一些你的代码并让它工作,这里是变化:

  1. 添加显示:无; filterDiv 类的样式;
  2. 添加显示:块; 表演课的风格;
  3. 未评论的鞋子细节。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div id="myBtnContainer">
        <button class="btn active" onclick="filterSelection('all')"> Show all</button>
        <button class="btn" onclick="filterSelection('hiking')"> Hiking Shoes</button>
        <button class="btn" onclick="filterSelection('boots')"> Boots</button>
        <button class="btn" onclick="filterSelection('sneakers')"> Sneakers</button>
    </div>

    <div class="container">

        <div class="box3">
            <div class="col2 filterDiv hiking" id="cardImage">

                <h2 class="shoe-name">hiking</h2>
                <img class="shoe-picture"></img>
                <p class="price"></p>
                <p class="color"></p>

                <form action="sizeguide.html">
                    <button class="btn-sizeguide">Find your size</button>
                </form>

            </div>
        </div>

        <div class="box3">
            <div class="col2 filterDiv boots" id="cardImage2">


                <h2 class="shoe-name">boots</h2>
                <img class="shoe-picture"></img>
                <p class="price"></p>
                <p class="color"></p>

                <form action="sizeguide.html">
                    <button class="btn-sizeguide">Find your size</button>
                </form>
            </div>
        </div>

        <div class="box3">
            <div class="col2 filterDiv sneakers" id="cardImage3">


                <h2 class="shoe-name">sneakers</h2>
                <img class="shoe-picture"></img>
                <p class="price"></p>
                <p class="color"></p>

                <form action="sizeguide.html">
                    <button class="btn-sizeguide">Find your size</button>
                </form>
            </div>
        </div>
    </div>

    <style>
        .filterDiv {
            background: blue;
            display: none;
        }

        .show {
            display: block;
        }
    </style>

    <script>
        //filter for product page
        filterSelection("all");
        function filterSelection(c) {
            var x, i;
            x = document.getElementsByClassName("filterDiv");
            if (c == "all") c = "";
            for (i = 0; i < x.length; i++) {
                removeClass(x[i], "show");
                if (x[i].className.indexOf(c) > -1) addClass(x[i], "show");
            }
        }

        function addClass(element, name) {
            var i, arr1, arr2;
            arr1 = element.className.split(" ");
            arr2 = name.split(" ");
            for (i = 0; i < arr2.length; i++) {
                if (arr1.indexOf(arr2[i]) == -1) { element.className += " " + arr2[i]; }
            }
        }

        function removeClass(element, name) {
            var i, arr1, arr2;
            arr1 = element.className.split(" ");
            arr2 = name.split(" ");
            for (i = 0; i < arr2.length; i++) {
                while (arr1.indexOf(arr2[i]) > -1) {
                    arr1.splice(arr1.indexOf(arr2[i]), 1);
                }
            }
            element.className = arr1.join(" ");
        }

        // Active class, clicked button 
        var btnContainer = document.getElementById("myBtnContainer");
        var btns = btnContainer.getElementsByClassName("btn");
        for (var i = 0; i < btns.length; i++) {
            btns[i].addEventListener("click", function () {
                var current = document.getElementsByClassName("active");
                current[0].className = current[0].className.replace(" active", "");
                this.className += " active";
            });
        }
    </script>

</body>

</html>

暂无
暂无

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

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM