JS过滤器不起作用

Question

我目前正在为客户开发一个登陆页面网站，以展示一系列产品。

我已经在JS中创建了一个过滤器来过滤某些产品，但无法正常工作。

两个收音机都标记有Motorola，当您选择Motorola时，它们不会显示出来吗？

我将不胜感激某人能给我的帮助。

我对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>

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

Answer 1

代码存在的问题是您要隐藏public class MeetingAuthorizationHandler : AuthorizationHandler<SameCreatorRequirement> { protected override Task HandleRequirementAsync(AuthorizationHandlerContext context, SameCreatorRequirement requirement) { context.Succeed(requirement); return Task.CompletedTask; } } ，但是要隐藏的实际项目是.product。参见下面的工作演示。

.category

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

  $(".category").hide().filter(filter).show();
});