Question

我的问题是我想要一个过滤系统，它会按选中的复选框进行过滤。该工具是我的比较网站，我在那里比较电视套餐。

我的访问者应该按照他们想要的电视频道过滤包裹。

实例;
复选框1：发现
复选框2：Animal PLanet
复选框3：迪士尼频道

输出应该是匹配的电视包
套餐1 :(包含发现和迪士尼频道）
套餐2 :(包含动物星球，迪士尼频道）
套餐3 :(包含动物星球）

因此，如果选中复选框1，则只应显示包1 如果选中复选框1 +复选框2，则应显示“未找到匹配项，但此程序包最接近您的选择”
如果选中复选框2 +复选框3，它应该只显示与访问者选择完全匹配的包2。

我希望你能帮助我。在这个具体的解决方案之后我一直在搜索，但没有任何成功。

Answer 1

我认为它应该在Jquery中。我已经看到了一些类似的过滤示例，但没有人像我的愿望一样。

Answer 2

这是一个老问题，但是......我会开枪。工作jsfiddle：http://jsfiddle.net/a0nnrfua/

我认为很大程度上取决于你打算如何定义“最接近”，但是假设一个jQuery解决方案，并希望你的浏览器要求在过去不太远，你可以使用数据属性和jQuery来具有一些相对简单的功能。甚至可以使用复选框的值部分。

Psuedocode，它看起来像：

定义点击或更改处理程序，以便在触摸/更改复选框时检测。
定义一个函数，该函数将扫描所有已检查的项目并将值传递到“最近的包”函数中。
根据该功能的结果，过滤您的包裹选择，以便以某种方式突出显示或标记您的选择。

因此，我们假设以下HTML标记：

    <h3>TV Channels</h3>

<div id="TVChannelSelections">
    <input type="checkbox" class="tvchannel" name="tvchannel" id="tvchannel_Discovery" value="Discovery" />
    <label for="tvchannel_Discovery">Discovery Channel</label>
    <br/>
    <input type="checkbox" class="tvchannel" name="tvchannel" id="tvchannel_AnimalPlanet" value="Animal Planet" />
    <label for="tvchannel_AnimalPlanet">Animal Planet</label>
    <br/>
    <input type="checkbox" class="tvchannel" name="tvchannel" id="tvchannel_DisneyChannel" value="Disney Channel" />
    <label for="tvchannel_Disney">Disney Channel</label>
    <br/>
</div>

<div id="message"></div>
<h3>Packages</h3>

<div id="FilteredPackages">
    <div class="package deselected" id="Package1" data-channels="Discovery,Disney Channel">Package #1</div>
    <div class="package deselected" id="Package2" data-channels="Animal Planet,Disney Channel">Package #2</div>
    <div class="package deselected" id="Package3" data-channels="Animal Planet">Package #3</div>
</div>

所以在jQuery中，您的通用更改或点击处理程序将在代码中定义：请注意，我说，页面上任何定义了类“tvchannel”的元素，如果发生了任何更改，请运行我的过滤功能。

<script type="text/javascript" src="../path/to/jQuery/library"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".tvchannel").on("change", function() {
            FilterMySelectedChannels();
        });
    });
</script>

现在我们可以定义您的过滤器功能。我们将假设两件事。＃1，我们想要找到所有选中的复选框及其值。然后我们将遍历所有包的数据通道属性（定义为带有class =“package”的元素）。我们将使用某种形式的字符串比较和布尔逻辑来定义完全匹配与完全匹配但没有雪茄匹配与完全失败的匹配。

为了跟踪我正在使用的3个类，选择，取消选择和关闭。

在css中，您可以决定是否要求选择“完全隐藏包”（即display：none;），或者您希望它可见但灰显并“被删除”（即文本修饰：删除线;颜色：灰色;}

我将使用一种蛮力的方式进行比较。在javascript中有更好的数组函数和比较函数，但对于大多数人来说这应该是相对清楚的，我相信stackoverflow的优秀人员可以使用更好的解决方案。但这应该让你开始。：）

<script type="text/javascript">
    function FilterMySelectedChannels() {
        $checkedboxes = $(".tvchannel:checked");
        $packages = $(".package");
        var bAnyFound = false;
        $packages.each(function () {
            var bCloseButNoCigar = false;
            var bCompleteMatch = true;
            var packagearray = $(this).data("channels").split(",");
            var $currentPackage = $(this);
            $checkedboxes.each(function () {
                if ($.inArray($(this).val(), packagearray) != -1) {
                    bCloseButNoCigar = true;
                } else {
                    bCompleteMatch = false;
                }
            });

            if (bCompleteMatch) {
                $currentPackage.removeClass("selected").removeClass("deselected").removeClass("close").addClass("selected");
                bAnyFound = true;
            } else if (bCloseButNoCigar) {
                $currentPackage.removeClass("selected").removeClass("deselected").removeClass("close").addClass("close");
            } else {
                $currentPackage.removeClass("selected").removeClass("deselected").removeClass("close").addClass("deselected");
            }
        });

        if (bAnyFound) {
            $("#message").html("The following matches were found");
        } else {
            $("#message").html("No actual matches were found, but here are some close matches based on your selections");
            $(".package.close").removeClass("deselected").removeClass("close").removeClass("selected").addClass("selected");
        }
    }
</script>

<style type="text/css">
    .selected {
        color: red;
        background-color: yellow !important;
    }

    .deselected {
        color: grey;
        text-decoration: strike-through !important;
        background-color: white !important;
    }
</style>

有明显的优化可能在这里起作用，但对于那些尝试做类似事情的人来说，这是一个开始。请注意，它假定您的标记是动态生成或正确编码的。如果你需要防止人为错别字，使用.toLowerCase / UpperCase转换文本并使用.Trim函数来消除额外的空间将有所帮助。但是你仍然必须明智地选择你的数据值，这样就没有重叠了。如果你选择它们足够好，你可以使用更好的技术，如正则表达式和通配符搜索，使代码更短。

希望这有助于某人！

使用复选框特定过滤

2 个答案: