0
Ich verwende die jQuery-UI-Registerkarten, um zwei Registerkarten anzuzeigen. Ich habe einen Bootstrap-Dropdown-Filter, der an das JPList-Plugin gebunden ist. Dies sollte innerhalb jeder Registerkarte filtern. Die Filterung erfolgt auf der ersten Registerkarte, nicht jedoch auf der zweiten Registerkarte.Das JPList-Plugin wird nur auf der ersten JQuery-UI-Registerkarte ausgelöst.
Um zu sehen, was ich meine, sehen Sie sich diese . Wenn Sie es ausführen, werden Sie feststellen, dass Sie Klimaanlage und Filter auswählen können, um die Elemente auf der ersten Registerkarte zu filtern. Wenn Sie es jedoch erneut ausführen und sofort auf die Registerkarte "Flyers" klicken, filtert keiner der Filter die Elemente auf dieser Registerkarte.
Eine Sache, die ich bemerkte, ist, dass es aussieht, dass meine ".list" -Klasse alle ".list-item" -Klassen einschließen sollte. Ich habe es versucht und es hat mich in die Luft gejagt. Kann es sonst etwas damit zu tun haben, dass sich die Filterliste nach der Initialisierung ändert?
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'
});
});