Question

我使用同位素根据类别过滤wordpress中的帖子。在Firefox中一切正常，但在Safari和Chrome过滤中无效。当我点击过滤器项目时，不会发生动画。定位是精美的crossbrowser。 Safari和Chrome都没有在错误控制台中报告任何错误，所以我不知道出了什么问题。

以下是Safari中输出的html：

过滤导航：

<div id="isotope-nav">
    <div class="gallery-fillter-wrapper">
        <select class="gallery-filter">
            <option>-- Filter galleries --</option>
            <option data-filter="*" class="isotope-nav-item">All galleries</option>                                                       <option data-filter=".art-exhibitions" class="isotope-nav-item">Art Exhibitions</option> 
                                                              <option data-filter=".historical-photos-exhibition" class="isotope-nav-item">Historical photos Exhibition</option> 
                                                              <option data-filter=".other-exhibitions" class="isotope-nav-item">Other exhibitions</option> 
                                                              <option data-filter=".springtime-in-the-royal-compound" class="isotope-nav-item">Springtime in The Royal Compound</option> 
                                                              <option data-filter=".summer-at-the-royal-compound" class="isotope-nav-item">Summer at The Royal Compound</option> 
                                                              <option data-filter=".the-artwork-of-the-month" class="isotope-nav-item">The Artwork of the Month</option> 
                                                                  <option data-filter=".the-regalia" class="isotope-nav-item">The Regalia</option> 
                                                              <option data-filter=".trh-prince-peter,-prince-philip-and-prince-alexander" class="isotope-nav-item">TRH Prince Peter, Prince Philip and Prince Alexander</option> 
                                                        </select>
    </div><!-- end .gallery-filter-wrapper -->
</div>

应过滤的项目

<div id="gallery-wrapper" style="position: relative; overflow: hidden; height: 1745px;" class="isotope">                                
    <div class="child-page-thumb art-exhibitions isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 0px, 0px);">
    </div><!-- end .child-page-thumb -->
    <div class="child-page-thumb art-exhibitions isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(239px, 0px, 0px);">
    </div><!-- end .child-page-thumb -->
    <div class="child-page-thumb art-exhibitions isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(478px, 0px, 0px);">
    </div><!-- end .child-page-thumb -->
    <div class="child-page-thumb historical-photos-exhibition isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(239px, 161px, 0px);">
    </div><!-- end .child-page-thumb -->
    <div class="child-page-thumb historical-photos-exhibition isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(478px, 161px, 0px);">
    </div><!-- end .child-page-thumb -->
    <div class="child-page-thumb historical-photos-exhibition isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 203px, 0px);">
    </div><!-- end .child-page-thumb -->
    <div class="child-page-thumb other-exhibitions isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(239px, 343px, 0px);">
    </div><!-- end .child-page-thumb -->
</div>

这是javascript：

var cell_width = $('.child-page-thumb').outerWidth();
var cell_height = $('.child-page-thumb').outerHeight();
$container = $('#gallery-wrapper');

$container.isotope({
    layoutMode: 'masonry'
});

$('#isotope-nav option').click(function(){
    $selector = $(this).attr('data-filter');
    $container.isotope({filter: $selector});
    return false;
});

Answer 1

我想出了这个。问题是在webkit浏览器中，选择<option>标签不能用作点击，因此我将导航转换为链接，<a>标签，并且一切都可以正常运行。

jQuery同位素过滤在Safari和Chrome中无效

1 个答案: