时间戳

首页 > 解决方案 > 具有多个类的jQuery过滤器如何“删除”一个过滤器而不删除两个类的结果？

jquery - 具有多个类的jQuery过滤器如何“删除”一个过滤器而不删除两个类的结果？

问题描述

我试图仅使用 HTML、CSS 和 jQuery 创建过滤解决方案，但未成功。没有运气在其功能中获得“独家”的东西（下面的示例）。

我正在创建一个过滤解决方案，例如：

例子 ：

如果我选择蓝色，我将有：A 和 C 和 D 作为结果

如果我同时选择蓝色和白色，我将得到：A 和 C 作为结果

当我取消选中白色时，我应该再次将 A 和 C 和 D 作为结果

目前，在检查时，我不能只检查两个类，而在取消选中时，它只会隐藏具有相应类的元素。

在我的示例中，这意味着：

有人能帮帮我吗？先感谢您 ！

$(document).ready(function(){ 
    $('.form-checkbox form input[type="checkbox"]').click(function() {
    if( $(this).is(':checked')) {
            $("."+$(this).attr('id')).css('display', 'inline-flex');
        } else {
            $("."+$(this).attr('id')).hide();
        }
    });
});

标签： jqueryhtmlcss

解决方案

你可以这样做：

$(document).ready(function(){ 
    var $all = $('.form-checkbox form input[type="checkbox"]');
    function refresh() {
        $(".card").hide(); // First hide all
        if (!$all.is(":checked")) return; // If nothing checked: that's it
        var ids = $all.filter(":checked").map(function () {
            return $(this).attr('id'); // Collect all the IDs of the selected items
        }).get().join("."); // ... and join them into one CSS class selector
        $("." + ids).css('display', 'inline-flex'); // Show those only
    }
    $all.click(refresh);
    refresh(); // Run immediately
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-checkbox"> 
    <form>
        <label><input type="checkbox" id="apples">Apples</label>
        <label><input type="checkbox" id="pears">Pears</label>
        <label><input type="checkbox" id="cucumbers">Cucumbers</label>
        <label><input type="checkbox" id="dates">Dates</label>
        <label><input type="checkbox" id="eggs">Eggs</label>
        <label><input type="checkbox" id="figs">Figs</label>
        <label><input type="checkbox" id="grapes">Grapes</label>
    </form>
</div>

<ul>
    <li class="card dates apples"><button>dates-apples</button></li>
    <li class="card dates apples cucumbers"><button>dates-apples-cucumbers</button></li>
    <li class="card dates eggs"><button>dates-eggs</button></li>
    <li class="card figs apples"><button>figs-apples</button></li>
    <li class="card dates grapes apples"><button>dates-grapes-apples</button></li>
    <li class="card dates cucumbers"><button>dates-cucumbers</button></li>
    <li class="card dates pears apples"><button>dates-pears-apples</button></li>
    <li class="card dates apples"><button>dates-apples</button></li>
    <li class="card pears dates apples eggs"><button>pears-dates-apples-eggs</button></li>
    <li class="card dates eggs"><button>dates-eggs-2</button></li>
    <li class="card "><button>nothing</button></li>
    <li class="card figs"><button>figs</button></li>
    <li class="card dates apples grapes"><button>dates-apples-grapes</button></li>
    <li class="card figs pears"><button>figs-pears</button></li>
    <li class="card cucumbers figs"><button>cucumbers-figs</button></li>
</ul>

推荐阅读