我设置了三个导航丸。当有人选择一个新的药丸/标签并点击标签区域内的任何内容时,它会正确排序我的同位素。这一切都很好。
当此人点击新的药丸/标签时,它会在下方显示正确的标签内容,并点击任何内容正确排序同位素。所以这一切都很好。
但问题是当选择实际标签时,我的数据过滤不会对同位素进行排序。它仍然显示该人在旧选项卡中选择的最后一个事物的排序。我希望这个值:导航片上的数据过滤器值(即data-filter-value =" .convertible")或者tabpanel会导致过滤发生在"单击"但没有运气。
这是我的代码:
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 padleft40" id="filters-one"> <!-- FILTERS ONE -->
<h4 class="sidebar_header">What Type of Car Interests You?</h4>
<ul class="nav nav-pills" role="tablist" id="myPill">
<li role="presentation"><a href="#all" aria-controls="all" role="tab" data-toggle="tab" id="cartype_btn0" data-filter-value="*">Show all</a></li>
<li role="presentation"><a href="#convertible" aria-controls="convertible" role="tab" data-toggle="tab" data-filter-value=".convertible">Convertible</a></li>
<li role="presentation"><a href="#sedan" aria-controls="sedan" role="tab" data-toggle="tab" data-filter-value=".sedan">Sedan</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="all" data-filter-value="*"> <!-- ALL CARS -->
<span><img src="/images/photos/other/showroom2.jpg" alt="#" width="300" /></span><br><br><h3>For All Cars</h3><h5 id='filter5-checker'>Anticipated Use?</h5>
<span class="button-group">
<button class='button is-checked' data-filter-value='*'>show all</button><button class='button' data-filter-value='.light-touring'>Tour Local Roadways</button><button class='button' data-filter-value='.racing, .performance'>Racing</button><br>
</span>
</span>
</div> <!-- // TABPANEL FOR ALL CARS-->
<div role="tabpanel" class="tab-pane" id="convertible" data-filter-value=".convertible"> <!-- CONVERTIBLES -->
我不会显示所有的标签面板......
</div> <!-- //CONVERTIBLES -->
</div> <!-- // TABCONTENT -->
<script>
$(function () {
$('#myPill a:first').tab('show')
})
</script>
</div>
<div class="col-lg-8 col-sm-8 col-sm-6 col-xs-12 padbot20">
<!-- <div class="container"> -->
<div class="isotope center" id="car_isotope_gallery">
<b>Isotope photos will be listed here.</b>
</div> <!-- Isotope ends here -->
</div><!-- //PHOTO CONTAINER -->
这是过滤代码。我相信我没有从标准同位素过滤中改变任何东西:
/******** REBUILD COMBO FILTER FUNCTION *********/
function rebuildComboFilter(filterType, filterValue) {
var newFilterArray = [];
var newFilterString = '';
storedComboFilterObject[filterType] = filterValue;
for (var type in storedComboFilterObject) {
if (storedComboFilterObject[type] === '*' && _.contains(newFilterArray, '*')) {
// do nothing: * already present, do not add another * to filters
} else {
newFilterArray.push(storedComboFilterObject[type]);
}
}
// sort filters to push a possible * ahead of defined classes
newFilterArray.sort(function (a, b) {
return (a === "*") ? -1 : 1;
});
newFilterString = newFilterArray.join('');
storedFilterString = newFilterString;
$('#filterstringmonitor').val(storedFilterString);
$container.isotope({ filter: storedFilterString });
}
/******** END REBUILD COMBO FILTER FUNCTION *********/
// respond to click in button-group and rebuild combo filters - check filterSelectors object
$('.button-group').on('click', 'button', function() {
var filterValue = $(this).attr('data-filter-value');
if (filterSelectors[filterValue]) {
filterValue = filterSelectors[filterValue];
} else {
filterValue = filterValue;
}
rebuildComboFilter($(this).parent('.button-group').attr('id'), filterValue);
});
// change is-checked class on buttons
$('.button-group').each(function(i, buttonGroup) {
var $buttonGroup = $(buttonGroup);
$buttonGroup.on('click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$(this).addClass('is-checked');
});
});