在jQuery中同时过滤“Radios+Select+Checkbox”的最快方法

在 jQuery 中过滤不同类型过滤器组合的最快策略（就性能而言）是什么？

在这个例子中，我使用“Radios + Select + Checkbox”并需要它们同时操作。

JS Bin 链接：https : //jsbin.com/wegopom/3/edit? js, output

我<img>在基于以下内容的传单地图中定位标记：

• 图像的“src”， 例如 img[src$="marker-icon.png"]（以文件名结尾）
• 图像的“类”， 例如 img.variation

过滤器的速度是核心，因为这张地图将显示成百上千的标记图像。

对于收音机，（“变体”类）...我有一个更改功能：

jQuery(document).on("change", ".variation", function() {

对于选择，（“filterbottler”ID）...我有第二个更改功能：

jQuery('#filterbottler').change(function(){

对于复选框，（“中断”ID）...我有第三个更改功能：

jQuery('#outages').change(function(){

使用一堆 IF 语句和相邻/链接的类（如 img.variation.bottler 会非常慢）使其中两个更改函数协同工作很简单……但是现在我添加了第三个过滤器，这似乎是过载，现在我很难将大脑围绕在每个过滤场景中。

JS Bin @ https://jsbin.com/wego/3/edit?js, 输出功能这三个过滤器中的每一个都独立工作......

目标是让前三个过滤器（Variation、Bottler 和 Outages）以最快和最有效的方式同时协同工作。我该如何解决这个问题？

jQuery(document).ready(function($){

    // Filter 1) by Variation
    jQuery(document).on("change", ".variation", function() {
        var bottlerValue = jQuery("#filterbottler").find("option:selected").val();
        var bottlerClass = '.field-ccb-cached__'+bottlerValue;

        // marker groups to be used in exclusionary :not() statements so they aren't affected by the filters... e.g. marker-icon.png & marker-icon-2x.png are "My Location" markers
        var mainMarkers = '[src$="bottler_22px.png"],[src$="marker-icon.png"],[src$="marker-icon-2x.png"]';
        var includeOutageMarkers = '[src$="bottler_22px.png"],[src$="marker-icon.png"],[src$="marker-icon-2x.png"],[src$="cross_22px.png"]';

        if (this.id == "map-filters-show-all") {
            jQuery('.leaflet-marker-pane img:not('+mainMarkers+')').show(500);
        }
        else if (this.id == "map-filters-16oz-cans") {
            jQuery('.leaflet-marker-pane img:not('+includeOutageMarkers+',.field-report-variation__16oz-cans)').hide(500);
            jQuery('.leaflet-marker-pane img.field-report-variation__16oz-cans').show(500);
        } else if (this.id == "map-filters-12oz-cans") {
            jQuery('.leaflet-marker-pane img:not('+includeOutageMarkers+',.field-report-variation__12oz-cans)').hide(500);
            jQuery('.leaflet-marker-pane img.field-report-variation__12oz-cans').show(500);
        } else if (this.id == "map-filters-fountain-surge") {
            jQuery('.leaflet-marker-pane img:not('+includeOutageMarkers+',.field-report-variation__fountain-surge)').hide(500);
            jQuery('.leaflet-marker-pane img.field-report-variation__fountain-surge').show(500);
        } else if (this.id == "map-filters-fountain-surge-red-berry-blast") {
            jQuery('.leaflet-marker-pane img:not('+includeOutageMarkers+',.field-report-variation__fountain-surge-red-berry-blast)').hide(500);
            jQuery('.leaflet-marker-pane img.field-report-variation__fountain-surge-red-berry-blast').show(500);
        }
    });

    // Filter 2) by Bottling Company (select box)
    jQuery('#filterbottler').change(function(){
        var bottlerValue = jQuery("#filterbottler").find("option:selected").val();
        var bottlerClass = '.field-ccb-cached__'+bottlerValue;

        if (bottlerClass != '.field-ccb-cached___none') {
            jQuery('.leaflet-marker-pane img:not([src$="bottler_22px.png"],[src$="marker-icon.png"],[src$="marker-icon-2x.png"],[src$="cross_22px.png"],'+bottlerClass+')').hide(500);
            jQuery('.leaflet-marker-pane img'+bottlerClass).show(500);
        }
        if (bottlerClass === '.field-ccb-cached___none') {
            jQuery('.leaflet-marker-pane img:not([src$="bottler_22px.png"],[src$="marker-icon.png"],[src$="marker-icon-2x.png"])').show(500);
        }

    });

    // Filter 3) Show Outage Reports (checkbox on/off)
    jQuery('#outages').change(function(){
        if(this.checked){
            jQuery('.leaflet-marker-pane img[src$="cross_22px.png"],[src$="exclamation_22px.png"]').fadeToggle(500);
            jQuery.cookie('outagemarkers', true);
        }
        else {
            jQuery('.leaflet-marker-pane img[src$="cross_22px.png"],[src$="exclamation_22px.png"]').fadeToggle(500);
            jQuery.cookie('outagemarkers', false);
        }
    });