0
2つのタブを表示するためにjQuery UIタブを使用しています。私は単一のブートストラップドロップダウンフィルターJPListプラグインに結びついている。これは、各タブ内でフィルタリングする必要があります。フィルタリングは、最初のタブでは機能しますが、2番目のタブでは機能しません。JPListプラグインは、最初のJQuery UIタブでのみ起動します。
私が何を意味するか見るには、Fidddleをご覧ください。実行すると、「空調とフィルター」を選択して、最初のタブの項目をフィルターすることができます。ただし、再実行してすぐに[フライヤー]タブをクリックすると、いずれのフィルターもそのタブの項目をフィルタリングしません。
私が気づいたことの1つは、 ".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'
});
});