Javascript JS过滤器不工作

我目前正在为客户开发一个登录页网站，以显示一系列产品

我在JS中创建了一个过滤器来过滤一些产品，但它不起作用

这两台收音机都贴上了摩托罗拉的标签，当你选择摩托罗拉时，它不会显示它们吗

如果有人能给我帮助，我将不胜感激

我对javascript不是最有信心的

<div class="container mg-b-40">
<div class="row">
    <div class="col-lg-2">
      <aside class="sidebar">
        <h5 class="heading-primary">Filter</h5>
        <ul class="shop-filters">
            <li class="filter">
                <input type="checkbox" value="motorola" id="motorola">
                <label for="motorola">Motorola</label>
            </li>
            <li class="filter">
                <input type="checkbox" value="hytera" id="hytera">
                <label for="hytera">Hytera</label>
            </li>
            <li class="filter">
                <input type="checkbox" value="icom" id="icom">
                <label for="icom">Icom</label>
            </li>
            <li class="filter">
                <input type="checkbox" value="vertex" id="vertex">
                <label for="vertex">Vertex</label>
            </li>
            <li class="filter">
                <input type="checkbox" value="kenwood" id="kenwood">
                <label for="kenwood">Kenwood</label>
            </li>
            <li class="filter">
                <input type="checkbox" value="savox" id="savox">
                <label for="savox">Savox</label>
            </li>
        </ul>
    </aside>  
    </div>
    <div class="col-lg-10">
        <div class="masonry-loader masonry-loader-showing">
            <div class="row products product-thumb-info-list mt-3" data-plugin-masonry data-plugin-options="{'layoutMode': 'fitRows'}">
                <div class="category motorola">
                    <div class="col-sm-6 col-lg-12 product">
                        <a href="shop-product-sidebar.html"></a>
                        <span class="product-thumb-info">
                            <span class="product-thumb-info-image">
                                <img alt="" class="img-fluid" src="https://cdn.shopify.com/s/files/1/1148/2692/products/dp1400-01_Radio_Shop_UK_b113f82f-a13b-4ffa-93fd-612f313084ef.jpg?v=1529421291">
                            </span>
                            <span class="product-thumb-info-content">
                                <h4 class="heading-brand">Motorola DP1400</h4>
                                <div class="btn-group action-group" role="group" aria-label="Action Buttons">
                                    <a href="tel:0800 774 7147" class="btn btn-primary btn-buy">Call Now</a>
                                    <a href="" class="btn btn-secondary btn-buy" rel=”nofollow”>Buy Now</a>
                                </div>
                            </span>
                        </span>
                    </div>
                </div>
                <div class="category hytera">
                    <div class="col-sm-6 col-lg-12 product">
                        <a href="shop-product-sidebar.html"></a>
                        <span class="product-thumb-info">
                            <span class="product-thumb-info-image">
                                <img alt="" class="img-fluid" src="https://cdn.shopify.com/s/files/1/1148/2692/products/dp1400-01_Radio_Shop_UK_b113f82f-a13b-4ffa-93fd-612f313084ef.jpg?v=1529421291">
                            </span>
                            <span class="product-thumb-info-content">
                                <h4 class="heading-brand">Motorola DP1400</h4>
                                <div class="btn-group action-group" role="group" aria-label="Action Buttons">
                                    <a href="tel:0800 774 7147" class="btn btn-primary btn-buy">Call Now</a>
                                    <a href="" class="btn btn-secondary btn-buy" rel=”nofollow”>Buy Now</a>
                                </div>
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

摩托罗拉DP1400
摩托罗拉DP1400

$（':input'）.change（函数（evt）{
变量过滤器=$（'：输入：选中，选择'）.map（函数（索引，el）{
返回“.”+el.value；
}).toArray（）.join（“”）；
$（“.product”）.hide（）.filter（filter.show（）；
});

代码的问题是您隐藏了

.product

，但实际要隐藏的项目是

.category

。请参见下面的工作演示

$（':input'）。更改（函数（evt）{
var filter=$（'：输入：选中，选择'）.map（函数（wel，el）{
返回“.”+el.value；
}).toArray（）.join（“”）；
$（“.category”）.hide（）.filter（filter.show（）；
});

摩托罗拉DP1400
海涅拉

<script>

$(':input').change(function(evt){

var filter = $(':input:checked,select').map(function(index, el) {
    return "." + el.value;
}).toArray().join("");

$(".product").hide().filter(filter).show();

});

</script>