Question

我构建了一个简单的产品过滤功能，至少在我尝试使用它的浏览器和平台上有效，但我不确定几件事情。我在Bigcommerce网站上构建了这个，但我认为我的问题仍然适用于广泛的（某些）：

1 - 这是一个可靠的方法吗？常规？如果不是，为什么，以及我应该如何/应该采用不同的方式？

2 - 我是否应该预计浏览器兼容性有任何问题？如果是这样，如果我使用股票Bigcommerce分面搜索选项，他们会遇到的问题与我遇到的任何问题不同吗？

- 假设开箱即用的分面搜索选项不可用

-jQuery在HTMLhead.html（头模板）中加载两次，分别为1.7.2和2.2.2

以下示例是我创建的简化版本。在此示例中，仅存在4个产品和2个类别。我们还可以假设没有产品属于多个类别：

HTML - （两个复选框，每个类别一个）

<fieldset>
    <div class="col-md-6 test-one"><label><input id="example-category-1" type="checkbox" value="first-checkbox" />CHOOSE CATEGORY 1</label></div>
    <div class="col-md-6 test-one"><label><input id="example-category-2" type="checkbox" value="second-checkbox" />CHOOSE CATEGOYR 2</label></div>
</fieldset>

HTML - fiddle with expanded li showing the structure of a random example product.

JS： - 页面加载，所有产品存在，没有点击复选框 - 当第一次点击复选框时，所有产品都被隐藏（而不是他们的父级产品）

    var test = true;
    $(".test-one").change(function() {
        if(test){           
            $('div[data-product]').parents("li").hide();
            //hide every product after first click on any checkbox 
            
            if( $('#example-category-1').is(':checked') ) {
            //check for checkbox activation and show products if true
                $('div[data-product="1802"]').parents("li").show();
                $('div[data-product="1781"]').parents("li").show();
            }
            if( $('#category-2').is(':checked') ) {
            //check for checkbox activation and show products if true
                $('div[data-product="1348"]').parents("li").show();
                $('div[data-product="1347"]').parents("li").show();
            }
            test =false;
            //set to false so we don't enter this if statement again
        }
    });

- 在剩下的时间里，这就是处理过滤的内容（想要从第一次点击中排除以下代码，但似乎可以正常工作）：

$('#example-category-1').click(function() {
        if( $(this).is(':checked') ) {
            $('div[data-product="1802"]').parents("li").show();
            $('div[data-product="1781"]').parents("li").show();
        } else {
            $('div[data-product="1802"]').parents("li").hide();
            $('div[data-product="1781"]').parents("li").hide();
        }
    });
    $('#example-category-2').click(function() {
        if( $(this).is(':checked') ) {
            $('div[data-product="1348"]').parents("li").show();
            $('div[data-product="1347"]').parents("li").show();
        } else {
            $('div[data-product="1348"]').parents("li").hide();
            $('div[data-product="1347"]').parents("li").hide();
        }
    });

最后注意：有人告诉我，我可以操纵产品对象来实现这样的目标 - 我在理论上知道产品对象是什么，但我不知道如何访问它/采取行动 - 任何意见都将非常感激。

非常感谢你的时间！

我构建了一个简单的产品过滤功能 - 质疑鲁棒性，传统性，JS

0 个答案: