Question

我想创建一个过滤下拉菜单，基本上类似于此site

上的菜单。

我要使用的是用于从类别中选择项目的过滤器

我要添加的是两个带有年份的字段，您可以选择一个年份范围（例如，从1988年到2014年），以筛选出与该范围内的年份匹配的所有项目。它需要与其他类型，类别等过滤器兼容，如上所述。谁能告诉我这是怎么做的？

$(".filterOptions").click(function() {

var ChosenType = $('#typeOption').find(':selected').attr('value');
var ChosenSize = $('#sizeOption').find(':selected').attr('value');


$('.thumbnail').css('display', 'none');
var selector = '.thumbnail';


if (ChosenType != "all") {
  selector += '[data-type-option="' + ChosenType + '"]';
}

if (ChosenSize != "all") {
  selector += '[data-size-option="' + ChosenSize + '"]';
}

$(selector).show();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="typeOption" class="filterOptions">
    <option  value="all">All</option>
    <option  value="type1">type1</option>
    <option  value="type2">type2</option>
    <option  value="type3">type3</option>
</select>

<select id="sizeOption" class="filterOptions">
    <option value="all">All</option>
    <option value="small">small</option>
    <option value="medium">medium</option>
    <option value="large">large</option>
</select>

<select id="startyear" class="filterOptions">
   <option value="all">from</option>
    <option value="2018">2018</option>
    <option value="2017">2017</option>
    <option value="2016">2016</option>
    <option value="2015">2015</option>
</select>

<select id="endyear" class="filterOptions">
   <option value="all">to</option>
    <option value="2018">2018</option>
    <option value="2017">2017</option>
    <option value="2016">2016</option>
    <option value="2015">2015</option>
</select>

<div class="thumbnail" data-type-option="type2" data-size-option="small" data-year-option="2015">content1</div>
<div class="thumbnail" data-type-option="type1" data-size-option="large" data-year-option="2016">content2</div>
<div class="thumbnail" data-type-option="type2" data-size-option="large" data-year-option="2017">content3</div>
<div class="thumbnail" data-type-option="type3" data-size-option="small" data-year-option="2018">content4</div>
<div class="thumbnail" data-type-option="type1" data-size-option="medium" data-year-option="2017">content5</div>
<div class="thumbnail" data-type-option="type3" data-size-option="medium" data-year-option="2018">content6</div>

Answer 1

您可以遍历所选元素并检查年份是否有效

if (ChosenType != "all") {
  selector += '[data-type-option="' + ChosenType + '"]';
}

if (ChosenCategory != "all") {
  selector += '[data-year-option="' + ChosenYear + '"]';
}
let startYr = ...; // make sure this is a number (not a string)
let endYr = ...; // make sure this is a number (not a string)
let elems = $(selector);
elems.each(function() {
   let yr = this.data-year-open; //select the year from your element. Make sure this is also a number
   if (yr >= startYr && yr <= endYr) $(this).show();
});

Answer 2

您可以在change事件上使用侦听器来选择元素，然后在filter方法内部使用以按类型和类别值以及hide div元素进行过滤。

const divs = $('.thumbnail')

$("select").on('change', function() {
  var type = $('#typeOption').val()
  var cat = $('#categoryOption').val()
  divs.show()

  if (type != 'all') {
    divs.filter(function() {
      return type !== $(this).data('type-option')
    }).hide()
  }

  if (cat != 'all') {
    divs.filter(function() {
      return cat !== $(this).data('category-option')
    }).hide()
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="typeOption">
  <option value="all">all</option>
  <option value="type1">1</option>
  <option value="type2">2</option>
  <option value="type3">3</option>
</select>

<select id="categoryOption">
  <option value="all">all</option>
  <option value="category1">1</option>
  <option value="category2">2</option>
  <option value="category3">3</option>
</select>

  <div class="thumbnail" data-type-option="type2" data-category-option="category3">content 1</div>
  <div class="thumbnail" data-type-option="type1" data-category-option="category3">content 2</div>
  <div class="thumbnail" data-type-option="type1" data-category-option="category2">content 3</div>

按两个输入值之间的范围过滤元素的菜单

2 个答案: