Javascript 使用jquery添加多个过滤器_Javascript_Jquery_Html_Css_Filter

Javascript 使用jquery添加多个过滤器

javascript jquery html css filter

Javascript 使用jquery添加多个过滤器,javascript,jquery,html,css,filter,Javascript,Jquery,Html,Css,Filter,我得到了一个使用html和过滤器的表，但我仍然有问题：我试图让多个过滤器同时工作，我试图让它显示任务类型以及是否已经完成或尚未完成我无法让完成的任务过滤器工作我已经添加了一个复选框过滤器，根据复选框是否被勾选将类添加到行中。它在选中时添加了类：已完成，在未选中时添加了类：未完成，但现在它不会过滤它们我的小提琴，如果你需要的话以下是我的jquery代码： // Filter Row Script Type of Quest // ..........................

我得到了一个使用html和过滤器的表，但我仍然有问题：

我试图让多个过滤器同时工作，我试图让它显示任务类型以及是否已经完成或尚未完成

我无法让完成的任务过滤器工作我已经添加了一个复选框过滤器，根据复选框是否被勾选将类添加到行中。它在选中时添加了类：已完成，在未选中时添加了类：未完成，但现在它不会过滤它们

我的小提琴，如果你需要的话

以下是我的jquery代码：

    // Filter Row Script Type of Quest
// ........................................
$('.filterMenu a').on('click', function (e) {
    e.preventDefault();
    var c = $(this).data('qtype');

    //get all trs from tbody
    var trs = $("#questTable").find("tbody tr");
    trs.hide();

    //Filter all trs from tbody
    trs.filter(function (i, v) {
        if ($(this).data("qtype") == c) {
            return true;
        }
        if (c == "all") {
            return true;
        }
        return false;
    })
    //just show the row if it fits the criteria
    .show();

});

// Filter Row Script Quest Completed or Not
// ........................................
$('.filterMenuCompleted a').on('click', function (e) {
    e.preventDefault();
    var c = $(this).attr('class');

    //get all trs from tbody
    var trs = $("#questTable").find("tbody tr");
    trs.hide();

    //Filter all trs from tbody
    trs.filter(function (i, v) {
        if ($(this).attr("class") == c) {
            return true;
        }
        if (c == "all") {
            return true;
        }
        return false;
    })
    //just show the row if it fits the criteria
    .show();

});

这里是我的html：

<body>
    <div id="content">
        <div class="filterMenuCompleted">
                <ul>
                    <li><a href="#" class="all">All</a></li>
                    <li><a href="#" class="completed">Completed</a></li>
                    <li><a href="#" class="notCompleted">Not Completed</a></li>
                </ul>
            </div>
        <div class="filterMenu">
            <ul>
                <li><a href="#" data-qtype="all">All</a></li>
                <li><a href="#" data-qtype="mcq">Main Scenario</a></li>
                <li><a href="#" data-qtype="sq">Side Quest</a></li>
            </ul>
        </div>
        <table id="questTable" style="max-width: 800px;" class="all">
            <thead>
                <tr>
                    <th class="table-header">#</th>
                    <th class="table-header">Type</th>
                    <th class="table-header">Icon</th>
                    <th class="table-header">LvL</th>
                    <th class="table-header">Name</th>
                    <th class="table-header">Issuing NPC</th>
                    <th class="table-header">Location</th>
                    <th class="table-header">Done It?</th>
                </tr>
            </thead>
            <tbody>
                <tr id="line1" class="table-row" data-qtype="mcq">
                    <td class="shortTd">MC-1</td>
                    <td class="shortTd">Main Scenario</td>
                    <td class="shortTd">
                        <img src="./images/Quests/Main_Scenario/mc.png" alt="" />
                    </td>
                    <td class="shortTd">1</td>
                    <td> <a href="#"> mcq 1</a>

                    </td>
                    <td>Name 1</td>
                    <td>Area 1</td>
                    <td class="shortTd">
                        <input class="completion" type="checkbox" id="checkbox1">
                    </td>
                </tr>
                <tr id="line2" class="table-row" data-qtype="mcq">
                    <td class="shortTd">Mc-2</td>
                    <td class="shortTd">Main Scenario</td>
                    <td class="shortTd">
                        <img src="./images/Quests/Main_Scenario/mc.png" alt="" />
                    </td>
                    <td class="shortTd">1</td>
                    <td> <a href="#">mcq 2</a>

                    </td>
                    <td>Name 2</td>
                    <td>Area 2</td>
                    <td class="shortTd">
                        <input class="completion" type="checkbox" id="checkbox2">
                    </td>
                </tr>
                <tr id="line2" class="table-row" data-qtype="sq">
                    <td class="shortTd">Sq-1</td>
                    <td class="shortTd">Side Quest</td>
                    <td class="shortTd">
                        <img src="./images/Quests/Main_Scenario/mc.png" alt="" />
                    </td>
                    <td class="shortTd">1</td>
                    <td> <a href="#">Side quest</a>

                    </td>
                    <td>Name 3</td>
                    <td>Area 3</td>
                    <td class="shortTd">
                        <input class="completion" type="checkbox" id="checkbox2">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="footer">Brought to you by Vesper Tia @ Moogle
        <br/>&copy; 2010 - 2015 SQUARE ENIX CO., LTD. All Rights Reserved.</div>
</body>

在这里，你们都明白了，我添加了这个

if（$（this）.hasClass（c））

，而不是

if（$（this）.attr（“class”）==c）

引用代码段

$（function（）{//筛选任务的行脚本类型
// ........................................
$（'.filterMenu a'）。在（'click'，函数（e）上{
e、 预防默认值（）；
var c=$（this.data（'qtype'）；
//从tbody获取所有trs
var trs=$（“#任务表”）.find（“tbody tr”）；
trs.hide（）；
//从车身过滤所有TR
trs.过滤器（功能（i、v）{
if（$（this）.data（“qtype”）==c）{
返回true；
}
如果（c==“全部”）{
返回true；
}
返回false；
})
//只要显示符合条件的行即可
.show（）；
});
//筛选行脚本任务是否已完成
// ........................................
$（'.filtermenua'）。在（'click'，函数（e）{
e、 预防默认值（）；
var c=$（this.attr（'class'）；
//从tbody获取所有trs
var trs=$（“#任务表”）.find（“tbody tr”）；
trs.hide（）；
//从车身过滤所有TR
trs.过滤器（功能（i、v）{
如果（$（此）.hasClass（c））{
返回true；
}
如果（c==“全部”）{
返回true；
}
返回false；
})
//只要显示符合条件的行即可
.show（）；
});
//行悬停脚本
// ........................................
$（文档）.ready（函数（）{
$（'.table行'）.hover（函数（）{
$（this.addClass（'current-row'）；
}，函数（）{
$（this.removeClass（'current-row'）；
});
});
//行隐藏脚本
// ........................................
$（文档）.ready（函数（）{
$（'tr'）
.filter（':has（：复选框：选中）'））
.addClass（“已完成”）
(完)
。单击（功能（事件）{
如果（event.target.type！==“复选框”）{
$（'：checkbox'，this.trigger（'click'）；
}
})
.find（“：复选框”）
。单击（功能（事件）{
$（this）.parents（'tr:first'）.toggleClass（'completed'）；
});
});
$（文档）.ready（函数（）{
$（'tr'）
.filter（“：has（：复选框：not（：checked））”）
.addClass（“未完成”）
(完)
。单击（功能（事件）{
如果（event.target.type！==“复选框”）{
$（'：checkbox'，this.trigger（'click'）；
}
})
.find（“：复选框”）
。单击（功能（事件）{
$（this）.parents（'tr:first'）.toggleClass（'notCompleted'）；
});
});
});
/**/
* {
保证金：0；
填充：0
}
html{
字体系列：Arial，无衬线；
字号：1em
}
h1，h2，h3{
裕度：0自动1em；
文本对齐：居中
}
h1{
边缘顶部：1米；
底线：0
}
氢{
颜色：#e8d19e
}
h3{
颜色：#5a9dd1
}
h4{
边缘底部：.5em；
垫底：20px；
文本对齐：居中
}
a{
颜色：#CC9900；
文字装饰：无；
字号：700
}
p{
边缘底部：1米；
文本对齐：对齐；
线高：1.3em
}
img{
最大宽度：100%
}
桌子{
保证金：1em自动3em；
边界塌陷：塌陷
}
表th{
填充物：5em 1em；
高度：2米；
字号：700；
颜色：#9ba3b6；
文本阴影：0 0 5px#000；
边框底部：实心1px#222；
}
表td{
填充物：5em 1em；
高度：2米；
背景色:#282828 ;；
边框底部：实心1px#666；
线高：1.4em；
文本对齐：左对齐
}
#内容{
填充：1em；
颜色：#DDD
}
.filtermenuul{高度：20px；浮动：左；边距右：50px；}
.filtermenuul li{
显示：块；
浮动：左；
右边距：5px；
}
.FilterManu ul{高度：20px；浮点：左；边距右：50px；}
.filterMenu ul li{
显示：块；
浮动：左；
清楚:对,；
右边距：5px；
}
/*响应设置*/
/*...............................................*/
@全部和全部介质（最大宽度：500px）{
桌子{
字体大小：.8em
}
.npcFullCardName、.npcIcon img{
显示：无
}
.cardLocation{
填充：15px；
宽度：300px；
背景尺寸：300px；
左：-85px；
字体大小：.8em
}
}
@介质和全部（最小宽度：501px）{
.npcFullCardName{
显示：内联；
颜色：#9c9；
光标：帮助
}
}
@介质和全部（最大宽度：1023px）{
html{
背景：url（../images/background_low.jpg）无重复上止点已修复#000
}
桌子{
最小宽度：100%；
宽度：100%
}
}
@介质和全部（最小宽度：1024px）{
html{
背景：url（../images/background.jpg）无重复中心固定#000；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面
}
#内容{
保证金：0自动；
最大宽度：1000px
}
}
}
/*行高亮显示*/
/*................................................................*/
.当前行td{
背景色：#1b1b1b；
颜色：#FFF
}
.完成的运输署{
不透明度：0.3
}











#
/*Global Resets*/

/*....................................*/
 * {
    margin:0;
    padding:0
}
html {
    font-family:Arial, sans-serif;
    font-size:1em
}
h1, h2, h3 {
    margin:0 auto 1em;
    text-align:center
}
h1 {
    margin-top:1em;
    margin-bottom:0
}
h2 {
    color:#e8d19e
}
h3 {
    color:#5a9dd1
}
h4 {
    margin-bottom:.5em;
    padding-bottom:20px;
    text-align:center
}
a {
    color:#CC9900;
    text-decoration:none;
    font-weight:700
}
p {
    margin-bottom:1em;
    text-align:justify;
    line-height:1.3em
}
img {
    max-width:100%
}
table {
    margin:1em auto 3em;
    border-collapse:collapse
}
table th {
    padding:.5em 1em;
    height:2em;
    font-weight:700;
    color:#9ba3b6;
    text-shadow:0 0 5px #000;
    border-bottom:solid 1px #222;
}
table td {
    padding:.5em 1em;
    height:2em;
    background-color:#282828;
    border-bottom:solid 1px #666;
    line-height:1.4em;
    text-align:left
}
#content {
    padding:1em;
    color:#DDD
}

.filterMenuCompleted ul{height: 20px;float: left; margin-right: 50px;}
.filterMenuCompleted ul li{
    display: block;
    float: left;
    margin-right: 5px;
}

.filterMenu ul{height: 20px;float: left; margin-right: 50px;}
.filterMenu ul li{
    display: block;
    float: left;
    clear: right;
    margin-right: 5px;
}
/*Responsive Settings*/

/*...............................................*/
 @media all and (max-width: 500px) {
    table {
        font-size:.8em
    }
    .npcFullCardName, .npcIcon img {
        display:none
    }
    .cardLocation {
        padding:15px;
        width:300px;
        background-size:300px;
        left:-85px;
        font-size:.8em
    }
}
@media all and (min-width: 501px) {
    .npcFullCardName {
        display:inline;
        color:#9c9;
        cursor:help
    }
}
@media all and (max-width: 1023px) {
    html {
        background:url(../images/background_low.jpg) no-repeat top center fixed #000
    }
    table {
        min-width:100%;
        width:100%
    }
}
@media all and (min-width: 1024px) {
    html {
        background:url(../images/background.jpg) no-repeat center center fixed #000;
        -webkit-background-size:cover;
        -moz-background-size:cover;
        -o-background-size:cover;
        background-size:cover
    }
    #content {
        margin:0 auto;
        max-width:1000px
    }
}
}
/*Row Highlight*/

/*................................................................*/
 .current-row td {
    background-color:#1b1b1b;
    color:#FFF
}
.completed td {
    opacity: 0.3
}

<div class="filterMenuCompleted">
    <ul>
        <li><a href="#" filterVal="all">All</a></li>
        <li><a href="#" filterVal="completed">Completed</a></li>
        <li><a href="#" filterVal="notCompleted">Not Completed</a></li>
    </ul>
</div>
<div class="filterMenu">
    <ul>
        <li><a href="#" filterVal="all">All</a></li>
        <li><a href="#" filterVal="mcq">Main Scenario</a></li>
        <li><a href="#" filterVal="sq">Side Quest</a></li>
    </ul>
</div>

var filterMenuCompSel = false;
var filterMenuSel = false;

$('.filterMenu ul li a').on('click', function(){
    $(this).closest('ul').find('li').removeClass('selected');
    $(this).closest('li').addClass('selected');
    filterMenuSel = $(this).attr('filterVal');
    ApplyFilter();
});
$('.filterMenuCompleted ul li a').on('click', function(){
    $(this).closest('ul').find('li').removeClass('selected');
    $(this).closest('li').addClass('selected');
    filterMenuCompSel = $(this).attr('filterVal');
    ApplyFilter();
});

function ApplyFilter(){
    $('#questTable tbody tr').each(function(){
        hide = false;
        switch(filterMenuCompSel){
            case 'completed':
                if(!$(this).find('.completion').is(':checked')){
                    hide = true;   
                }
                break;
            case 'notCompleted':
                if($(this).find('.completion').is(':checked')){
                    hide = true;
                }
                break;
        }
        if(!hide){
            switch(filterMenuSel){
                case 'mcq':
                    if($(this).find('td:nth-child(2)').text() != 'Main Scenario'){
                        hide = true;
                    }
                    break;
                case 'sq':
                    if($(this).find('td:nth-child(2)').text() != 'Side Quest'){
                        hide = true;
                    }
                    break;
            }
        }
        if(!hide){
            $(this).show();
        }
        if(hide){
            $(this).hide();
        }
    });
}