有没有办法在同一个 html 页面上使用两次 jQuery Isotope？

问题描述

我想在同一个 HTML 页面的不同部分使用 jQuery (Isotope - Plugin) 两次，但存在两个同时响应的问题。

这是过滤器操作按钮：

<ul class="filterNav filter-button-group">
  <li class="nav-item">
      <a class="filterBtn is-checked" data-filter=".technology" href="javascript:void(0);">Technology</a>
  </li>
  <li class="nav-item">
      <a class="filterBtn" data-filter=".electronic" href="javascript:void(0);">Electronic</a>
  </li>
  <li class="nav-item">
      <a class="filterBtn" data-filter=".fashion" href="javascript:void(0);">Fashion</a>
  </li>
  <li class="nav-item">
      <a class="filterBtn" data-filter=".homeware" href="javascript:void(0);">Homeware</a>
  </li>
  <li class="nav-item">
      <a class="filterBtn" data-filter=".furniture" href="javascript:void(0);">Furniture</a>
  </li>

这是过滤结果：

<div class="gridFilterWrap d-flex flex-wrap">
<!-- element-item -->
<div class="element-item itemVI fashion technology px-2" data-category="fashion technology">
    <!-- productCol -->
    <article class="productCol d-flex flex-column w-100 position-relative">

    </article>
</div>
<!-- element-item -->
<div class="element-item itemVI technology furniture px-2" data-category="fashion technology furniture">
    <!-- productCol -->
    <article class="productCol d-flex flex-column w-100 position-relative">

    </article>
</div>
<!-- element-item -->
<div class="element-item itemVI fashion technology px-2" data-category="fashion technology">
    <!-- productCol -->
    <article class="productCol d-flex flex-column w-100 position-relative">

    </article>
</div>
<!-- element-item -->
<div class="element-item itemVI technology px-2" data-category="fashion technology">
    <!-- productCol -->
    <article class="productCol d-flex flex-column w-100 position-relative">

    </article>
</div>
<!-- element-item -->
<div class="element-item itemVI electronic furniture technology px-2" data-category="electronic furniture technology">
    <!-- productCol -->
    <article class="productCol d-flex flex-column w-100 position-relative">

    </article>
</div>
<!-- element-item -->
<div class="element-item itemVI homeware fashion technology px-2" data-category="homeware fashion technology">
    <!-- productCol -->
    <article class="productCol d-flex flex-column w-100 position-relative">

    </article>
</div>
<!-- element-item -->
<div class="element-item itemVI furniture homeware px-2" data-category="furniture homeware">
    <!-- productCol -->
    <article class="productCol d-flex flex-column w-100 position-relative">

    </article>
</div>
<!-- element-item -->
<div class="element-item itemVI electronic fashion px-2" data-category="electronic fashion">
    <!-- productCol -->
    <article class="productCol d-flex flex-column w-100 position-relative">

    </article>
</div>

这里有一些 jQuery 来处理它：

jQuery(window).on('load',function() {
"use strict";

// external js: isotope.pkgd.js

// filter functions
var filterFns = {
    // show if number is greater than 50
    numberGreaterThan50: function() {
      var number = $(this).find('.number').text();
      return parseInt( number,10 ) > 50;
    },// show if name ends with -ium
    ium: function() {
      var name = $(this).find('.name').text();
      return name.match( /ium$/ );
    }
};

function getHashFilter() {
    // get filter=filterName
    var matches = location.hash.match( /filter=([^&]+)/i );
    var hashFilter = matches && matches[1];
    return hashFilter && decodeURIComponent( hashFilter );
    }

    // init Isotope
    var $grid = $('.gridFilterWrap');

    // bind filter button click
    var $filterButtonGroup = $('.filter-button-group');
    $filterButtonGroup.on( 'click','.filterBtn',function() {
      var filterAttr = $( this ).attr('data-filter');
    // set filter in hash
    location.hash = 'filter=' + encodeURIComponent( filterAttr );
    });

    var isIsotopeInit = false;

    function onHashchange() {
      var hashFilter = getHashFilter();
      if ( !hashFilter && isIsotopeInit ) {
        return;
    }
    isIsotopeInit = true;
    // filter isotope
    $grid.isotope({
      itemSelector: '.element-item',/*layoutMode: 'fitRows',*/
      // use filterFns
      filter: filterFns[ hashFilter ] || hashFilter
    });
    // set selected class on button
    if ( hashFilter ) {
      $filterButtonGroup.find('.is-checked').removeClass('is-checked');
      $filterButtonGroup.find('[data-filter="' + hashFilter + '"]').addClass('is-checked');
    }
}

$(window).on( 'hashchange',onHashchange );

// trigger event handler to init Isotope
onHashchange();

});

这是视觉图片：

enter image description here 有什么办法可以解决吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）