Question

这是针对学校的作业，我使用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";
    });
}

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

Answer 1

我对您的代码进行了一些编辑，使其生效，这是更改：

添加的显示：无； filterDiv类的样式；
添加了display：block;表演班的风格；
未注释的鞋子详细信息。

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

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

1 个答案: