我正在使用jQuery UI标签显示2个标签。我有一个绑定到JPList插件的Bootstrap下拉过滤器。这应该在每个标签内过滤。过滤适用于第一个选项卡，但不适用于第二个选项卡。
要了解我的意思，请查看此Fidddle。如果您运行它，您会注意到您可以选择空调和过滤器来过滤第一个选项卡上的项目。但是，如果您重新运行它，并立即单击“传单”选项卡，则两个过滤器都不会过滤该选项卡中的项目。
我注意到的一件事是看起来我的“.list”类应该包装所有“.list-item”类。我试过了，它炸毁了我。除此之外，它可能与初始化后更改过滤器列表有关吗？
HTML
<div class="container-fluid">
<div id="init">
<div id="tabs" class="ui-tabs ui-corner-all ui-widget ui-widget-content">
<ul role="tablist" class="ui-tabs-nav ui-corner-all ui-helper-reset ui-helper-clearfix ui-widget-header">
<li role="tab" tabindex="0" class="ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-tabs-active ui-state-active" aria-controls="tabs-1" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true"><a href="#tabs-1" role="presentation" tabindex="-1" class="ui-tabs-anchor" id="ui-id-1">Promotions</a></li>
<li role="tab" tabindex="-1" class="ui-tabs-tab ui-corner-top ui-state-default ui-tab" aria-controls="tabs-2" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false"><a href="#tabs-2" role="presentation" tabindex="-1" class="ui-tabs-anchor" id="ui-id-2">Flyers</a></li>
<!--<li><a href="#tabs-3">Social Media</a></li>
<li><a href="#tabs-4">Articles</a></li>-->
</ul>
<!-- START Promotion Category Dropdown-->
<div class="row catrow">
<div class="jplist-panel">
<div class="dropdown text-center filter" data-control-type="boot-filter-drop-down" data-control-name="category-filter" data-control-action="filter" data-default="true">
<button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" id="dropdown-menu-1" aria-expanded="true">
<span data-type="selected-text">Filter by category</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdown-menu-1">
<li class="defaultItem" role="presentation" style="display: none;"><a role="menuitem" tabindex="-1" href="#" class="default" data-path="default" data-jplist-selected="true">Filter by category</a></li>
<li role="presentation" class="filterMenu"><a role="menuitem" tabindex="-1" href="#" data-path=".AirConditioning" data-jplist-selected="false">Air Conditioning</a></li>
<li role="presentation" class="filterMenu"><a role="menuitem" tabindex="-1" href="#" data-path=".Filters" data-jplist-selected="false">Filters</a></li>
<li role="presentation" class="filterMenu" style="display: none;"><a role="menuitem" tabindex="-1" href="#" data-path=".FlyerTestCategory1" data-jplist-selected="false">Flyer Test Category 1</a></li>
<li role="presentation" class="filterMenu" style="display: none;"><a role="menuitem" tabindex="-1" href="#" data-path=".FlyerTestCategory2" data-jplist-selected="false">Flyer Test Category 2</a></li>
<li role="presentation" class="filterMenu" style="display: none;"><a role="menuitem" tabindex="-1" href="#" data-path=".Heating" data-jplist-selected="false">Heating</a></li>
<li role="presentation" class="filterMenu" style="display: none;"><a role="menuitem" tabindex="-1" href="#" data-path=".Holidays" data-jplist-selected="false">Holidays</a></li>
<li role="presentation" class="filterMenu" style="display: none;"><a role="menuitem" tabindex="-1" href="#" data-path=".HVACRTips" data-jplist-selected="false">HVACR Tips</a></li>
<li role="presentation" class="filterMenu" style="display: none;"><a role="menuitem" tabindex="-1" href="#" data-path=".IAQ" data-jplist-selected="false">IAQ</a></li>
<li role="presentation" class="filterMenu" style="display: none;"><a role="menuitem" tabindex="-1" href="#" data-path=".LaborShortage" data-jplist-selected="false">Labor Shortage</a></li>
<li role="presentation" class="filterMenu" style="display: none;"><a role="menuitem" tabindex="-1" href="#" data-path=".NowHiring" data-jplist-selected="false">Now Hiring</a></li>
<li role="presentation" class="filterMenu" style="display: none;"><a role="menuitem" tabindex="-1" href="#" data-path=".Products" data-jplist-selected="false">Products</a></li>
</ul>
</div>
</div>
</div>
<!-- /END Promotion Category Dropdown-->
<!-- START Tab 1 -->
<div id="tabs-1" aria-labelledby="ui-id-1" role="tabpanel" class="ui-tabs-panel ui-corner-bottom ui-widget-content" aria-hidden="false" style="display: block;">
<div class="row">
<div class="col-xs-6 header">Promotion Title</div>
<div class="col-xs-6 header">Download PDF</div>
</div>
<!-- Start List -->
<div class="list">
<!-- Query for Promotion PDF files -->
<!-- START List Item -->
<!-- /END List Item -->
<!-- START List Item -->
<!-- /END List Item -->
<div class="list-item">
<div class="container">
<div class="row">
<span class="promotions AirConditioning hide">Air Conditioning</span>
<div class="col-xs-6 text-center mt10">
<a href="http://www.crescentparts.com/assets/IAQ-Allergies-Promo-Flyer-Template.pdf" target="_blank">
Promo 1 </a>
</div>
<div class="col-xs-6 text-center mb10">
<a href="http://www.crescentparts.com/assets/IAQ-Allergies-Promo-Flyer-Template.pdf" download="Promo 1">
<button type="button" class="btn btn-primary btn-lg">Download</button>
</a>
</div>
</div>
</div>
</div>
<div class="list-item">
<div class="container">
<div class="row">
<span class="promotions Filters hide">Filters</span>
<div class="col-xs-6 text-center mt10">
<a href="http://www.crescentparts.com/assets/IAQ-Allergies-Promo-Flyer-Template.pdf" target="_blank">
Promo 2 </a>
</div>
<div class="col-xs-6 text-center mb10">
<a href="http://www.crescentparts.com/assets/IAQ-Allergies-Promo-Flyer-Template.pdf" download="Promo 2">
<button type="button" class="btn btn-primary btn-lg">Download</button>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- /END List-->
</div>
<!-- /END Tab 1 -->
<!-- START Tab 2 -->
<div id="tabs-2" aria-labelledby="ui-id-2" role="tabpanel" class="ui-tabs-panel ui-corner-bottom ui-widget-content" aria-hidden="true" style="display: none;">
<div class="row">
<div class="col-xs-6 header">Flyer Title</div>
<div class="col-xs-6 header">Download Flyer</div>
</div>
<!-- Start List -->
<div class="list">
<!-- Query for PDF files -->
<!-- Start List Item -->
<div class="list-item">
<div class="container">
<div class="row">
<span class="flyers FlyerTestCategory1 hide">Flyer Test Category 1</span>
<div class="col-xs-6 text-center mt10">
<a href="http://www.crescentparts.com/assets/Honeywell-Lyric-Product-Bundle-Sell-Sheet-Template.pdf" target="_blank">
Honeywell Lyric Product Bundle Sell Sheet Template </a>
</div>
<div class="col-xs-6 text-center mb10">
<a href="http://www.crescentparts.com/assets/Honeywell-Lyric-Product-Bundle-Sell-Sheet-Template.pdf" download="Honeywell Lyric Product Bundle Sell Sheet Template">
<button type="button" class="btn btn-primary btn-lg">Download</button>
</a>
</div>
</div>
</div>
</div>
<!-- /END List item -->
<!-- Start List Item -->
<div class="list-item">
<div class="container">
<div class="row">
<span class="flyers FlyerTestCategory2 hide">Flyer Test Category 2</span>
<div class="col-xs-6 text-center mt10">
<a href="http://www.crescentparts.com/assets/IAQ-Allergies-Promo-Flyer-Template.pdf" target="_blank">
Are You Ready For Allergy Season? IAQ Product Promo Template </a>
</div>
<div class="col-xs-6 text-center mb10">
<a href="http://www.crescentparts.com/assets/IAQ-Allergies-Promo-Flyer-Template.pdf" download="Are You Ready For Allergy Season? IAQ Product Promo Template">
<button type="button" class="btn btn-primary btn-lg">Download</button>
</a>
</div>
</div>
</div>
</div>
<!-- /END List item -->
<!-- Start List Item -->
<div class="list-item">
<div class="container">
<div class="row">
<span class="flyers FlyerTestCategory2 hide">Flyer Test Category 2</span>
<div class="col-xs-6 text-center mt10">
<a href="http://www.crescentparts.com/assets/Humidifier-Winter-Graphic.pdf" target="_blank">
Why Get A Humidifier This Winter? </a>
</div>
<div class="col-xs-6 text-center mb10">
<a href="http://www.crescentparts.com/assets/Humidifier-Winter-Graphic.pdf" download="Why Get A Humidifier This Winter?">
<button type="button" class="btn btn-primary btn-lg">Download</button>
</a>
</div>
</div>
</div>
</div>
<!-- /END List item -->
<!-- Start List Item -->
<div class="list-item">
<div class="container">
<div class="row">
<span class="flyers FlyerTestCategory2 hide">Flyer Test Category 2</span>
<div class="col-xs-6 text-center mt10">
<a href="http://www.crescentparts.com/assets/Financing-Promo.png" target="_blank">
Financing Promo </a>
</div>
<div class="col-xs-6 text-center mb10">
<a href="http://www.crescentparts.com/assets/Financing-Promo.png" download="Financing Promo">
<button type="button" class="btn btn-primary btn-lg">Download</button>
</a>
</div>
</div>
</div>
</div>
<!-- /END List item -->
<!-- Start List Item -->
<div class="list-item">
<div class="container">
<div class="row">
<span class="flyers FlyerTestCategory1 hide">Flyer Test Category 1</span>
<div class="col-xs-6 text-center mt10">
<a href="http://www.crescentparts.com/assets/Laundry-Scrubber-Homeowner-Promo-Sheet-Template.pdf" target="_blank">
Laundry Scrubber Homeowner Promo Sheet Template </a>
</div>
<div class="col-xs-6 text-center mb10">
<a href="http://www.crescentparts.com/assets/Laundry-Scrubber-Homeowner-Promo-Sheet-Template.pdf" download="Laundry Scrubber Homeowner Promo Sheet Template">
<button type="button" class="btn btn-primary btn-lg">Download</button>
</a>
</div>
</div>
</div>
</div>
<!-- /END List item -->
<!-- Start List Item -->
<div class="list-item">
<div class="container">
<div class="row">
<span class="flyers FlyerTestCategory1 hide">Flyer Test Category 1</span>
<div class="col-xs-6 text-center mt10">
<a href="http://www.crescentparts.com/assets/Air-Scrubber-Plus-Homeowner-Promo-Sheet-Template-1.pdf" target="_blank">
Air Scrubber Plus Homeowner Promo Sheet Template </a>
</div>
<div class="col-xs-6 text-center mb10">
<a href="http://www.crescentparts.com/assets/Air-Scrubber-Plus-Homeowner-Promo-Sheet-Template-1.pdf" download="Air Scrubber Plus Homeowner Promo Sheet Template">
<button type="button" class="btn btn-primary btn-lg">Download</button>
</a>
</div>
</div>
</div>
</div>
<!-- /END List item -->
</div>
<!-- /END List -->
</div>
<!-- /END Tab 2 -->
</div>
<!-- /END Init -->
</div>
<!-- /END Tabs -->
</div>
的jQuery
jQuery.noConflict();
jQuery(document).ready(function() {
'use strict';
// On Current Tab Click Run functions
jQuery("#tabs").tabs({
active: false,
collapsible: true,
activate: function(event, ui) {
function getCategories(){
//Show All Categories Before Running Filter
var $filterMenu = jQuery('.filterMenu');
$filterMenu.show();
// Get current tab text
var $tabText = jQuery(ui.newTab).text().toLowerCase();
//Get list of categories found in current tab
var catText = jQuery('.' + $tabText).map(function(i, cat) {
return jQuery(cat).text();
}).get();
// Create Array from Current Tab Categories
var currCatTextList = catText.join(','),
currCatTextArray = currCatTextList.split(","),
currArray = currCatTextArray;
// Log Current Tab Category Array
console.log(currCatTextArray);
//Hide li's in all category list not found in current tab
jQuery('#tabs .dropdown-menu li').filter(function(idx, ele) {
return currArray.indexOf(ele.textContent) == -1;
}).hide();
}
// Call getCategories Function on Tab Initialization and Each Tab Click
getCategories();
}
})
.tabs('option', 'active', 0)
.tabs('option', 'collapsible', false);
jQuery('#init').jplist({
itemsBox: '.list'
,itemPath: '.list-item'
,panelPath: '.jplist-panel'
});
});
答案 0 :(得分：0)
这里的问题是一个jplist实例不能有2个“.list”部分。 一种可能的解决方案是在每个选项卡内传输下拉列表，并在每个选项卡中调用单独的jplist实例。 第二个选项是在所有选项卡周围创建一个通用的“.list”包装器。