Javascript 用于筛选/显示两种不同类别类型的脚本_Javascript_Jquery

Javascript 用于筛选/显示两种不同类别类型的脚本

javascript jquery

Javascript 用于筛选/显示两种不同类别类型的脚本,javascript,jquery,Javascript,Jquery,我很难让两个过滤器类别一起工作。选中下拉列表中的月份和选中区域复选框时，所需结果仅显示div 一个巨大的加号将是一个计数器显示显示的div与总div的数量这是我现在的代码 <select name="month-select" id="month-select"> <option id="select">Select a Month</option> <option value="jan" id="jan

我很难让两个过滤器类别一起工作。选中下拉列表中的月份和选中区域复选框时，所需结果仅显示div

一个巨大的加号将是一个计数器显示显示的div与总div的数量

这是我现在的代码

        <select name="month-select" id="month-select">
        <option id="select">Select a Month</option>
        <option value="jan" id="jan" name="jan">January</option>
        <option value="feb" id="feb" name="feb">February</option>
        <option value="mar" id="mar" name="mar">March</option>
        <option value="apr" id="apr" name="apr">April</option>
        <option value="may" id="may" name="may">May</option>
        <option value="jun" id="jun" name="jun">June</option>
        <option value="jul" id="jul" name="jul">July</option>
        <option value="aug" id="aug" name="aug">August</option>
        <option value="sep" id="sep" name="sep">September</option>
        <option value="oct" id="oct" name="oct">October</option>
        <option value="nov" id="nov" name="nov">November</option>
        <option value="dec" id="dec" name="dec">December</option>
    </select> 
    <input type="checkbox" value="red" id="red" onclick="Color.filterByColor(this);" checked="checked" class="checkbox checkboxColor"><label for="ck-loc-us">red</label>

    <input type="checkbox" value="green" id="green" onclick="Color.filterByColor(this);" checked="checked" class="checkbox checkboxColor"><label for="ck-loc-us">green</label>

    <input type="checkbox" value="blue" id="blue"onclick="Color.filterByColor(this);" checked="checked" class="checkbox checkboxColor"><label for="ck-loc-us">blue</label>

    <input type="checkbox" value="selectall" id="selectall"onclick="Color.filterByColorSelectAll();" checked="checked" class="checkbox checkboxColor"><label for="ck-loc-us">select all colors</label>
    <div id="fulllist">
    <div class="rResult red jan mar apr may">
        <h3>Spring and January</h3>
                <ul>
                  <li>Stuff</li>
                  <li>Stuff</li>
                  <li>Stuff</li>
                </ul>
            <a href="#">CTA</a>
    </div>
    <div class="rResult blue apr may dec">
        <h3>April May December</h3>
                <ul>
                  <li>Stuff</li>
                  <li>Stuff</li>
                  <li>Stuff</li>
                </ul>
            <a href="#">CTA</a>
    </div>

    <div class="rResult green jul">
        <h3>July Only</h3>
                <ul>
                  <li>Stuff</li>
                  <li>Stuff</li>
                  <li>Stuff</li>
                </ul>
            <a href="#">CTA</a>
    </div>
<div id="filtersContainerUpdatingMessage">
    <p>Updating...</p>
</div>

<div class="divsShowing">
    Showing
        <span class="textForALL">ALL ( </span>
        <span class="divsShowing"> </span> of <span class="divsTotal"> </span>
        <span class="textForALL">) </span>
    Divs
</div>

<div class="divsShowingAreZero">
    <p>Please select a color and/or different month.</p>
</div>
    </div>
     <script>
        $('#month-select').change(function(){
            $('.rResult').each(function(){
                if ($(this).hasClass($('#month-select').val())) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        });
    </script>


选择一个月
一月
二月
前进
四月
也许
六月
七月
八月
九月
十月
十一月
十二月
红色
绿色
蓝色
选择所有颜色
春一月

东西
东西
东西

四月五月十二月

东西
东西
东西

仅七月

东西
东西
东西

更新
显示
全部（
属于
) 
Divs
请选择颜色和/或其他月份
$（“#月份选择”）.change（函数（）{
$（'.rResult'）。每个（函数（）{
if（$（this）.hasClass（$（'#month select'）.val（））{
$（this.show（）；
}否则{
$（this.hide（）；
}
});
});

尝试以下方法。这是处理过滤器的统一方法

请注意以下几点

除了
```
selectall
```
所有更改函数将调用相同的通用函数，选择All将选中并取消选中颜色复选框，然后调用通用函数

$（'#月份选择'）。更改（函数（）{
window.filter（）；
});
窗口颜色={
filterByColor:函数（）{
window.filter（）；
},
filterByColorSelectAll:函数（）{
如果（$（“#selectall”）。为（“：选中”））
$（“.checkColor”）.prop（“选中”、“选中”）；
其他的
$（“.checkColor”）.removeProp（“选中”）；
window.filter（）；
},
}
window.filter=函数（）{
var month=$（'#month select'）.val（）；
如果（月==null | |月==“”）
$（'.rResult'）.show（）；//全部显示
否则{
$（'.rResult'）.hide（）；//全部隐藏
$（'.rResult.'+month）.show（）；//按月筛选
}
var strColorFilter=[]；
var checkedItems=$（“.checkecolor:not（：checked）”）.map（函数（i，o）{
返回“+”o.id；
}).get（）；
//按颜色过滤
if（checkedItems.length==0）返回；
strColorFilter.push（“.rResult:visible”）；//在月后使用visible过滤器
strColorFilter.push（checkedItems）；
$（strColorFilter.join（“”）.hide（）；
}

.rResult{}


选择一个月
一月
二月
前进
四月
也许
六月
七月
八月
九月
十月
十一月
十二月
红色
绿色
蓝色
选择所有颜色
春一月

东西
东西
东西

四月五月十二月

东西
东西
东西

仅七月

东西
东西
东西

更新
显示
全部（
属于
)Divs
请选择颜色和/或其他月份

尝试以下方法。这是处理过滤器的统一方法

请注意以下几点

除了
```
selectall
```
所有更改函数将调用相同的通用函数，选择All将选中并取消选中颜色复选框，然后调用通用函数

$（'#月份选择'）。更改（函数（）{
window.filter（）；
});
窗口颜色={
filterByColor:函数（）{
window.filter（）；
},
filterByColorSelectAll:函数（）{
如果（$（“#selectall”）。为（“：选中”））
$（“.checkColor”）.prop（“选中”、“选中”）；
其他的
$（“.checkColor”）.removeProp（“选中”）；
window.filter（）；
},
}
window.filter=函数（）{
var month=$（'#month select'）.val（）；
如果（月==null | |月==“”）
$（'.rResult'）.show（）；//全部显示
否则{
$（'.rResult'）.hide（）；//全部隐藏
$（'.rResult.'+month）.show（）；//按月筛选
}
var strColorFilter=[]；
var checkedItems=$（“.checkecolor:not（：checked）”）.map（函数（i，o）{
返回“+”o.id；
}).get（）；
//按颜色过滤
if（checkedItems.length==0）返回；
strColorFilter.push（“.rResult:visible”）；//在月后使用visible过滤器
strColorFilter.push（checkedItems）；
$（strColorFilter.join（“”）.hide（）；
}

.rResult{}


选择一个月
一月
二月
前进
四月
也许
六月
七月
八月
九月
十月
十一月
十二月
红色
绿色
蓝色
选择所有颜色
春一月

东西
东西
东西

四月五月十二月

东西
东西
东西

仅七月

东西
东西
东西

更新
显示
全部（
属于
)Divs
请选择颜色和/或其他月份

为了更好地理解，请提供一个工作演示（代码片段，JSFIDLE…）对不起，这是正确的JSFIDLE，这里是JSFIDLE。每个div将只分配一个颜色类别，但可能分配多个月。但只想让div显示