Question

我尝试仅使用HTML，CSS和jQuery创建过滤解决方案而未成功。不能在功能上获得“专有”的东西（下面的示例）。

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

如果未选中任何复选框，则不会显示任何内容
对于每个选中的复选框，显示相应的按钮（带有类）
如果选中两个，则仅显示两个类别的按钮
如果未选中这些复选框之一，则取消添加的选择元素。

示例：

A是蓝色和白色
B是白色和灰色
C是蓝色，白色和橙色
D是蓝色和金色

如果我选择BLUE，则结果为：A，C和D

如果同时选择BLUE和WHITE，则结果为：A和C

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

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

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

如果我同时选择了BLUE和WHITE，则结果为A，B，C和D。
当我取消选中WHITE时，结果将只有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();
        }
    });
});

Answer 1

您可以这样做：

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

具有多个类的jQuery过滤器如何在不删除两个类的结果的情况下“删除”一个过滤器？

1 个答案: