在 jQuery Isotope 中结合过滤和排序

如何解决在 jQuery Isotope 中结合过滤和排序

我正在尝试找到一种将过滤和排序功能结合起来的方法。换句话说，我想先按商场类型进行过滤，然后在该过滤组内按其他各种方式进行排序，例如按字母顺序、按州、按平方英尺等。到目前为止，我没有找到将这两者结合起来的一种方式。我显然可以过滤或排序。但不能两者兼而有之。而在这个 Codepen 中，我只能过滤，我不知道为什么。

// Switch between grid & list views
jQuery(($) => {
  $(".showSingle").click((e) => {
    e.preventDefault();

    $(".content").hide();
    let targetSelector = $(e.currentTarget).attr("href");
    $(targetSelector).show();
  });
});
// end Switch between grid & list views

// external js: isotope.pkgd.js
// init Isotope
var $grid = $(".grid").isotope({
  itemSelector: ".color-shape",getFilterData: {
    name: '.name',symbol: '.status',size: '.size parseInt',category: '[data-category]',weight: function(itemElem) {
      var weight = $(itemElem).find('.weight').text();
      return parseFloat(weight.replace(/[\(\)]/g,''));
    }
  }
});

// store filter for each group
var filters = {};

$(".filters").on("click",".button",function(event) {
  var $button = $(event.currentTarget);
  // get group key
  var $buttonGroup = $button.parents(".button-group");
  var filterGroup = $buttonGroup.attr("data-filter-group");
  // set filter for group
  filters[filterGroup] = $button.attr("data-filter");
  // combine filters
  var filterValue = concatValues(filters);
  // set filter for Isotope
  $grid.isotope({
    filter: filterValue
  });
});

// change is-checked class on buttons
$(".button-group").each(function(i,buttonGroup) {
  var $buttonGroup = $(buttonGroup);
  $buttonGroup.on("click","button",function(event) {
    $buttonGroup.find(".is-checked").removeClass("is-checked");
    var $button = $(event.currentTarget);
    $button.addClass("is-checked");
  });
});

// flatten object by concatting values
function concatValues(obj) {
  var value = "";
  for (var prop in obj) {
    value += obj[prop];
  }
  return value;
}
// end Isotope Grid View

// Isotope List View
var $table = $("#div2 .table-like").isotope({
  layoutMode: "vertical",getSortData: {
    name: ".name",symbol: ".symbol",number: ".number parseInt",category: ".category",weight: function(itemElem) {
      var weight = $(itemElem).find(".weight").text();
      return parseFloat(weight.replace(/[\(\)]/g,""));
    }
  }
});

// bind sort button click
$("#div2 #sorts").on("click",function() {
  var sortValue = $(this).attr("data-sort-value");
  $table.isotope({
    sortBy: sortValue
  });
});

// change is-checked class on buttons
$("#div2 .button-group").each(function(i,function() {
    $buttonGroup.find(".is-checked").removeClass("is-checked");
    $(this).addClass("is-checked");
  });
});
//end Isotope List View

.content {
  display: none;
}

#div1 {
  display: block;
}

#div1 .button {
  display: inline-block;
  padding: 0.5em 1em;
  background: #eee;
  border: none;
  border-radius: 7px;
  background-image: linear-gradient( to bottom,hsla(0,0%,0),0.2));
  color: #222;
  font-family: sans-serif;
  font-size: 16px;
  text-shadow: 0 1px white;
  cursor: pointer;
}

#div1 .button:hover {
  background-color: #8cf;
  text-shadow: 0 1px hsla(0,100%,0.5);
  color: #222;
}

#div1 .button:active,#div1 .button.is-checked {
  background-color: #28f;
}

#div1 .button.is-checked {
  color: white;
  text-shadow: 0 -1px hsla(0,0.8);
}

#div1 .button:active {
  box-shadow: inset 0 1px 10px hsla(0,0.8);
}


/* ---- button-group ---- */

#div1 .button-group:after {
  content: "";
  display: block;
  clear: both;
}

#div1 .button-group .button {
  float: left;
  border-radius: 0;
  margin-left: 0;
  margin-right: 1px;
}

#div1 .button-group .button:first-child {
  border-radius: 0.5em 0 0 0.5em;
}

#div1 .button-group .button:last-child {
  border-radius: 0 0.5em 0.5em 0;
}


/* ---- isotope ---- */

#div1 .grid {
  background: #eee;
  max-width: 1200px;
}


/* clear fix */

#div1 .grid:after {
  content: "";
  display: block;
  clear: both;
}


/* ui group */

#div1 .ui-group {
  display: inline-block;
}

#div1 .ui-group h3 {
  display: inline-block;
  margin-right: 0.2em;
  font-size: 16px;
}

#div1 .ui-group .button-group {
  display: inline-block;
  margin-right: 20px;
}


/* color-shape */

#div1 .color-shape {
  width: 70px;
  height: 70px;
  margin: 5px;
  float: left;
}

#div1 .color-shape.round {
  border-radius: 35px;
}

#div1 .color-shape.big.round {
  border-radius: 75px;
}

#div1 .color-shape.red {
  background: red;
}

#div1 .color-shape.blue {
  background: blue;
}

#div1 .color-shape.yellow {
  background: yellow;
}

#div1 .color-shape.wide,.color-shape.big {
  width: 150px;
}

#div1 .color-shape.tall,.color-shape.big {
  height: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/js/bootstrap.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />




<section id="content" class="container-fluid" style="padding: 0 5rem;">
  <div class="row">
    <div class="col-10">
      <p>You can sort our properties below by clicking on the buttons.</p>
    </div>

    <div class="col-2 d-flex">
      <div class="d-grid gap-2 d-md-block ms-auto">
        <a class="btn btn-primary showSingle float-right" href="#div1" data-bs-toggle="button" aria-pressed="true"><i class="fas fa-th-large"></i></a>
        <a class="btn btn-primary showSingle float-right" href="#div2" data-bs-toggle="button" aria-pressed="false"><i class="fas fa-list"></i></a>
      </div>
    </div>
  </div>
</section>

<div id="div1" class="content">

  <h1>Isotope - combination filters</h1>

  <div class="filters">

    <div class="ui-group">
      <div class="button-group js-radio-button-group" data-filter-group="type">
        <button class="button is-checked" data-filter="">all</button>
        <button class="button" data-filter=".mall">malls</button>
        <button class="button" data-filter=".open">open air centers</button>
      </div>
    </div>

    <div class="ui-group">
      <div class="button-group js-radio-button-group" data-filter-group="details">
        <button class="button is-checked" data-filter="">any</button>
        <button class="button" data-filter=".state">by state</button>
        <button class="button" data-filter=".name">by name</button>
        <button class="button" data-filter=".size">by sq. ft. size</button>
      </div>
    </div>

  </div>

  <div class="grid">
    <div class="color-shape small round red mall">
      <h3 class="state">WY</h3>
      <span class="name">Zaphod</span>
      <span class="size">500</span>
    </div>
    <div class="color-shape small round blue open">
      <h3 class="state">CA</h3>
      <span class="name">Ford</span>
      <span class="size">42</span>
    </div>
    <div class="color-shape small round yellow open">
      <h3 class="state">TN</h3>
      <span class="name">Dirk</span>
      <span class="size">200</span>
    </div>
    <div class="color-shape small square red"></div>
    <div class="color-shape small square blue"></div>
    <div class="color-shape small square yellow"></div>
    <div class="color-shape wide round red"></div>
    <div class="color-shape wide round blue"></div>
    <div class="color-shape wide round yellow"></div>
    <div class="color-shape wide square red"></div>
    <div class="color-shape wide square blue"></div>
    <div class="color-shape wide square yellow"></div>
    <div class="color-shape big round red"></div>
    <div class="color-shape big round blue"></div>
    <div class="color-shape big round yellow"></div>
    <div class="color-shape big square red"></div>
    <div class="color-shape big square blue"></div>
    <div class="color-shape big square yellow"></div>
    <div class="color-shape tall round red"></div>
    <div class="color-shape tall round blue"></div>
    <div class="color-shape tall round yellow"></div>
    <div class="color-shape tall square red"></div>
    <div class="color-shape tall square blue"></div>
    <div class="color-shape tall square yellow"></div>
  </div>
</div>

<div id="div2" class="content">

  <div id="sorts" class="button-group">
    <button class="button is-checked" data-sort-value="original-order">original order</button>
    <button class="button" data-sort-value="name">name</button>
    <button class="button" data-sort-value="symbol">symbol</button>
    <button class="button" data-sort-value="number">number</button>
    <button class="button" data-sort-value="weight">weight</button>
    <button class="button" data-sort-value="category">category</button>
  </div>

  <ul class="table-like">

    <li class="table-like__item">
      <div class="name">Mercury</div>
      <div class="symbol">Hg</div>
      <div class="number">80</div>
      <div class="weight">200.59</div>
      <div class="category">transition</div>
    </li>

    <li class="table-like__item">
      <div class="name">Tellurium</div>
      <div class="symbol">Te</div>
      <div class="number">52</div>
      <div class="weight">127.6</div>
      <div class="category">metalloid</div>
    </li>

    <li class="table-like__item">
      <div class="name">Bismuth</div>
      <div class="symbol">Bi</div>
      <div class="number">83</div>
      <div class="weight">208.980</div>
      <div class="category">post-transition</div>
    </li>

    <li class="table-like__item">
      <div class="name">Lead</div>
      <div class="symbol">Pb</div>
      <div class="number">82</div>
      <div class="weight">207.2</div>
      <div class="category">post-transition</div>
    </li>

    <li class="table-like__item">
      <div class="name">Gold</div>
      <div class="symbol">Au</div>
      <div class="number">79</div>
      <div class="weight">196.967</div>
      <div class="category">transition</div>
    </li>

    <li class="table-like__item">
      <div class="name">Potassium</div>
      <div class="symbol">K</div>
      <div class="number">19</div>
      <div class="weight">39.0983</div>
      <div class="category">alkali</div>
    </li>

    <li class="table-like__item">
      <div class="name">Sodium</div>
      <div class="symbol">Na</div>
      <div class="number">11</div>
      <div class="weight">22.99</div>
      <div class="category">alkali</div>
    </li>

    <li class="table-like__item">
      <div class="name">Cadmium</div>
      <div class="symbol">Cd</div>
      <div class="number">48</div>
      <div class="weight">112.411</div>
      <div class="category">transition</div>
    </li>
  </ul>

</div>

在 jQuery Isotope 中结合过滤和排序

如何解决在 jQuery Isotope 中结合过滤和排序

相关推荐