使用 jQuery 根据两组复选框切换各种 div 的可见性？

Question

我有大量的 div/文章，其中包含一堆荒野指南的联系信息。我正在尝试根据两组复选框来切换每个 div 的可见性 - 一组用于指南专门从事的活动（钓鱼、狩猎等），一组用于他们所在的州（阿拉斯加、科罗拉多等） )。

有一个类似的问题here 我一直在尝试关注，但我遗漏了一些东西。

更新：过滤器目前主要工作，但彼此独立，而不是一起工作。如果有人从第一组过滤器中选择 FISHING 并从第二组过滤器中选择 ALASKA，它当前会显示所有提供钓鱼的指南，无论他们是否在阿拉斯加，因为已选中钓鱼。另一个问题是，如果检查了 2 个状态，它不会显示任何结果，因为没有 div 将有 2 个类的状态......一个 AND 与 OR 问题。

最终目标是让用户根据自己的喜好选择尽可能多的运动和状态，并过滤掉（隐藏）与所选运动和状态都不匹配的 div。理想情况下，作为无 JS 后备，我想首先显示所有 div，然后在不满足过滤条件时删除可见性，但接下来我会解决这个问题。

这是更新后的JSFiddle

快速而肮脏的 HTML：

    <div class="sport-wrapper">
        <h2>Choose a Sport:</h2>        
        <ul>
            <li><label for="fish"><input type="checkbox" id="fish" name="sport"/>Fly Fishing</label></li>
            <li><label for="hunt"><input type="checkbox" id="hunt" name="sport" />Hunting</label></li>
            <li><label for="raft"><input type="checkbox" id="raft" name="sport" />Rafting</label></li>
        </ul>
    </div>
    <div class="state-wrapper">    
        <h2>Choose a State:</h2>
        <ul>
            <li><label for="AK" class="guide-available"><input type="checkbox" id="AK" name="state"/>Alaska</label></li>
            <li><label for="CA" class="guide-available"><input type="checkbox" id="CA" name="state"/>California</label></li>
            <li><label for="CO" class="guide-available"><input type="checkbox" id="CO" name="state"/>Colorado</label></li>
        </ul>
    </div>
    <div class="results">    
        <h2>Available Guides:</h2>       
        <div data-category="guide ak fish">
            <h3>Joe's Alaska Fishing Tours</h3>
        </div>
        <div data-category="guide ak fish hunt">
            <h3>Mike's Alaska Fishing and Hunting Adventures</h3>
        </div>
        <div data-category="guide co fish raft">
            <h3>Jim's Colorado Rafting and Fishing Lodge</h3>
        </div>
        <div data-category="guide ca raft">
            <h3>California Whitewater Rafting</h3>
        </div>
    </div>

还有当前的 jQuery（不太好用）：

function filterItems() {
    var state = $(":checkbox:checked").map( function(){ return this.value; }).get();
    var goodClasses = state.join(",");
    $(".guide").hide().filter(goodClasses).show();
}

filterItems();

$(":checkbox").change(filterItems);

Answer 1

我看不出你的小提琴代码有什么问题，只是你没有将“item”作为类。

HTML

function filterItems() {

    var state = $(":checkbox:checked").map(function () {
        return this.value;
    }).get();
    
    console.log(state);
    
    var goodClasses = state.join("");
    console.log("Displaying : " + goodClasses);
    $(".item").hide().filter(goodClasses).show();
};

filterItems();

$(":checkbox").change(filterItems);

ul {
    display:inline-block;
    list-style:none;
}
li {
    float:left;
    margin-left:2em;
    font-family:sans-serif;
}
h2 {
    color:#666;
}
h3 {
    color:#99CC00;
    border:1px #666 solid;
    text-align:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <h2>Choose a Sport:</h2> 
<ul class="sport-list">
    <li>
        <input type="checkbox" id="fish" name="sport" value=".fish">
        <label for="fish">Fly Fishing</label>
    </li>
    <li>
        <input type="checkbox" id="hunt" name="sport" value=".hunt">
        <label for="hunt">Hunting</label>
    </li>
    <li>
        <input type="checkbox" id="raft" name="sport" value=".raft">
        <label for="raft">Rafting</label>
    </li>
</ul>
 <h2>Choose a State:</h2>

<ul class="state-list">
    <li>
        <input type="checkbox" id="AK" name="state" value=".ak">
        <label for="AK" class="guide-available">Alaska</label>
    </li>
    <li>
        <input type="checkbox" id="CA" name="state" value=".ca">
        <label for="CA" class="guide-available">California</label>
    </li>
    <li>
        <input type="checkbox" id="CO" name="state" value=".co">
        <label for="CO" class="guide-available">Colorado</label>
    </li>
</ul>
 <h2>Available Guides:</h2> 
        <div>
<article class="item guide ak fish">
     <h3>Joe's Alaska Fishing Tours</h3>

</article>
<article class="item guide ak fish hunt">
     <h3>Mike's Alaska Fishing and Hunting Adventures</h3>

</article>
<article class="item guide co fish raft">
     <h3>Jim's Colorado Rafting and Fishing Lodge</h3>

</article>
<article class="item guide ca raft">
    <h3>California Whitewater Rafting</h3>
    </article>
            <div>

Answer 2

请使用此更新后的代码， 您需要在

中设置 $('.guide') 类而不是 $('.item') 和 join(" ")

function filterItems() {
    var state = $(":checkbox:checked").map( function(){ return this.value; }).get();
    var goodClasses = state.join(",");
    $(".guide").hide().filter(goodClasses).show();
}

$(document).ready(function(){
    filterItems();

    $(":checkbox").change(filterItems);
});

Answer 3

好的...所以我回到了发布此问题之前一直在寻找的类似问题。您可以看到该问题/解决方案HERE。在发布这个问题之前，我应该花更多时间了解这一点。

这是一个可行的解决方案

简而言之，我正在使用的解决方案通过复选框组的名称属性循环（Pho3nixHun 在我的参考问题中的解决方案）

它开始显示整个指南列表。然后，它将过滤到任何和所有选择的运动，然后将使用任何和所有选择的状态过滤这些结果。

这里是完整的JSFiddle

还有工作的 jQuery：

var bySport = [], byState = [];

        $("input[name=sport]").on( "change", function() {
            if (this.checked) bySport.push("[data-category~='" + $(this).attr("value") + "']");
            else removeA(bySport, "[data-category~='" + $(this).attr("value") + "']");
        });

        $("input[name=state]").on( "change", function() {
            if (this.checked) byState.push("[data-category~='" + $(this).attr("value") + "']");
            else removeA(byState, "[data-category~='" + $(this).attr("value") + "']");
        });


        $("input").on( "change", function() {
            var str = "Include items \n";
            var selector = '', cselector = '', nselector = '';

            var $lis = $('.guide-list > div'),
                $checked = $('input:checked');  

            if ($checked.length) {  

                if (bySport.length) {       
                    if (str == "Include items \n") {
                        str += "    " + "with (" +  bySport.join(',') + ")\n";              
                        $($('input[name=sport]:checked')).each(function(index, bySport){
                            if(selector === '') {
                                selector += "[data-category~='" + bySport.id + "']";                    
                            } else {
                                selector += ",[data-category~='" + bySport.id + "']";   
                            }                
                        });                 
                    } else {
                        str += "    AND " + "with (" +  bySport.join(' OR ') + ")\n";               
                        $($('input[name=sport]:checked')).each(function(index, bySport){
                            selector += "[data-category~='" + bySport.id + "']";
                        });
                    }                           
                }

                if (byState.length) {                       
                    if (str == "Include items \n") {
                        str += "    " + "with (" +  byState.join(' OR ') + ")\n";                   
                        $($('input[name=state]:checked')).each(function(index, byState){
                            if(selector === '') {
                                selector += "[data-category~='" + byState.id + "']";                    
                            } else {
                                selector += ",[data-category~='" + byState.id + "']";   
                            }                
                        });                 
                    } else {
                        str += "    AND " + "with (" +  byState.join(' OR ') + ")\n";               
                        $($('input[name=state]:checked')).each(function(index, byState){
                            if(cselector === '') {
                                cselector += "[data-category~='" + byState.id + "']";                   
                            } else {
                                cselector += ",[data-category~='" + byState.id + "']";  
                            }                   
                        });
                    }           
                }



                $lis.hide(); 
                console.log(selector);
                console.log(cselector);
                console.log(nselector);

                if (cselector === '' && nselector === '') {         
                    $('.guide-list > div').filter(selector).show();
                } else if (cselector === '') {
                    $('.guide-list > div').filter(selector).filter(nselector).show();
                } else if (nselector === '') {
                    $('.guide-list > div').filter(selector).filter(cselector).show();
                } else {
                    $('.guide-list > div').filter(selector).filter(cselector).filter(nselector).show();
                }

            } else {
                $lis.show();
            }   

            $("#result").html(str); 

        });

        function removeA(arr) {
            var what, a = arguments, L = a.length, ax;
            while (L > 1 && arr.length) {
                what = a[--L];
                while ((ax= arr.indexOf(what)) !== -1) {
                    arr.splice(ax, 1);
                }
            }
            return arr;
        }

还有 HTML：

<pre id=result> </pre> <!-- PRE simply shows filters in action in the results to double check everything's working.  Can remove -->

            <h2>Let's Find You a Guide</h2>
            <div class="filter-wrap">            
                <h3><strong>Select any or all activities you're interested in:</strong></h3>
                <ul>
                    <li><label><input type="checkbox" name="sport" value="fish" id="fish" /> Fishing</label></li>
                    <li><label><input type="checkbox" name="sport" value="hunt" id="hunt" /> Hunting</label><br> 
                    <li><label><input type="checkbox" name="sport" value="charter" id="charter" /> Boat Charters</label></li>                     
                    <li><label><input type="checkbox" name="sport" value="hike" id="hike" /> Hiking</label></li>
                    <li><label><input type="checkbox" name="sport" value="raft" id="raft" /> Rafting</label></li>  
                    <li><label><input type="checkbox" name="sport" value="other" id="other" /> Other</label></li>
                </ul>
                <h3><strong>Select any states you're willing to travel to:</strong></h3>
                <ul>
                    <li><label><input type="checkbox" name="state" value="AK" id="AK" /> Alaska</label></li>
                    <li><label><input type="checkbox" name="state" value="CA" id="CA" /> California</label></li>
                    <li><label><input type="checkbox" name="state" value="CO" id="CO" /> Colorado</label></li>                  
                    <li><label><input type="checkbox" name="state" value="NY" id="NY" /> New York</label></li>                    
                </ul>                                
            </div>
            <hr/>


            <div class="guide-list">
                <div class="guide" data-category="raft CA CO">Rafting in California or Colorado</div>
                <div class="guide" data-category="hike raft CO">Colorado Hiking and Rafting</div>
                <div class="guide" data-category="raft NY ">Upstate New York Rafting</div>
                <div class="guide" data-category="raft hunt NY">NY Hunting and Rafting Outfitters</div>  
                <div class="guide" data-category="raft NY">NYC Rafting Co.</div>                    
                <div class="guide" data-category="charter NY">Charter Boats of NYC</div>  
                <div class="guide" data-category="hike raft other CO">Colorado Hike Bike and Raft</div> 
                <div class="guide" data-category="charter other NY">Bike and Boat Rentals New York</div> 
                <div class="guide" data-category="fish CO">Colorado Fishing Tours</div> 
                <div class="guide" data-category="fish CA">Fishing Guides San Francisco</div>  
                <div class="guide" data-category="hike other CA">California Hiking and Other Stuff</div>  
                <div class="guide" data-category="raft AK">Alaskan Rafting Adventures</div>  
                <div class="guide" data-category="raft hunt CO">Denver Raft and Hunt</div>                  
            </div>