Question

<!DOCTYPE>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>E-commerce Website</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>          
            $(document).on("change", ".order-sorting", function() {
                var sortingMethod = $(this).val();
                if(sortingMethod == 'abc') {
                    sortProductsAlphabetically();
                }
            }); 

            function sortProductsAlphabetically() {
                var products = document.getElementsByClassName("product-item");
                products.sort(function(a, b) { 
                    var item1 = document.getElementById("product-name").toUpperCase;
                    var item2 = document.getElementById("product-name").toUpperCase;
                    return (item1 < item2) ? -1 : (item1 > item2) ? 1 : 0;
                });
                document.getElementsByClassName("product-grid").innerHTML(products);
            }
        </script>
    </head> 
    <body> 
        <select class="order-sorting selectBox" name="order-sorting">
            <option>Relevance</option>  
            <option value="abc">Alphabetical Order</option>
        </select>

        <div class="product-grid">
            <div class="product-item">
                <img class="vr_headset_iphone_red" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVpLUMNSvaIgOvm5DVg65fap-HzwBEyhJKU23KUCQj5QcUsKuC">
                <br>
                <span id="product-name">Maplin Pro VR Headset with HD</span>
                <span class="vr_headset_item_4">Stereo Headphones - Red</span>
                <br>
                <br>
                <span class="price_item">£39.99</span>
                <br>
                <br>
                <button class="basket_item style_basket">ADD TO BASKET</button>
            </div>

            <div class="product-item">
                <img class="vr_headset_iphone_black" src="https://i1.wp.com/virtualrealitygearreview.com/wp-content/uploads/2018/01/41gXvNpslJL.jpg?fit=128%2C128">
                <br>
                <span id="product-name">Tepoinn 3D VR Glasses Headset</span>
                <span class="vr_headset_item_2">Virtual Reality Box - Black</span>
                <br>
                <br>
                <span class="price_item">£18.99</span>
                <br>
                <br>
                <button onclick="add-to-basket" class="basket_item style_basket">ADD TO BASKET</button>
            </div>            

            <div class="product-item">
                <img class="samsung_vr_headset_white" src="https://mi1.rightinthebox.com/images/128x128/201712/xobxzr1513926050913.jpg">
                <br>
                <span id="product-name">Samsung Gear Virtual Reality</span>
                <span class="vr_headset_item_10">Headset - White</span>
                <br>
                <br>
                <span class="price_item">£79.99</span>
                <br>
                <br>
                <button class="basket_item style_basket">ADD TO BASKET</button>
            </div>
        </div>
    </body>
</html>

我正在创建自己的网站，我正在尝试按字母顺序对产品进行排序（A - Z）。但是，我使用的JQuery和JavaScript代码不起作用。我研究了如何解决这个问题，并使用了一个示例代码here，但代码仍然不适合我，并且代码也没有错误。点击此处查看代码 - JSFiddle。

使用DropDown按字母顺序对产品进行排序

0 个答案: