0

我设置了三个导航药丸。当有人选择一个新的药丸/标签并单击标签区域内的任何内容时，它会正确排序我的同位素。这一切都很好。

当用户点击一个新的药丸/标签时，它会在下方显示正确的标签内容，点击其中任何一个内容都会对同位素进行正确排序。所以这也很好。

But the issue is that the isotope is not sorted with my data-filtering when the actual tab is selected. 它仍然显示人们在旧选项卡中选择的最后一件事的排序。我希望这个值：导航药丸上的数据过滤器值（即数据过滤器值 =“.convertible”）或选项卡面板会导致过滤发生在“点击”但没有运气。

这是我的代码：

<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');
        });
    });
4

0 回答 0