Question

好的，我要为我的网站创建一个过滤下拉菜单。这就是我得到的：

<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="yearOption">
   <option value="all">all</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-year-option="2018">content</div>
<div class="thumbnail" data-type-option="type1" data-year-option="2017">content</div>
<div class="thumbnail" data-type-option="type1" data-year-option="2016">content</div>

应根据选择显示或隐藏两个选择元素和一堆缩略图。

和以下jquery：

var ChosenType = $('#typeOption').find(':selected').attr('value');
var ChosenYear = $('#yearOption').find(':selected').attr('value');


$('.thumbnail').css('display','none');
var selector = '.thumbnail';


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

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

$(selector).show();

到目前为止，该方法仍然有效。问题来了：这仅检查所选类别是否与缩略图完全匹配。基本上我想要的是一个额外的年份选择元素，第一个应该从所选年份向前过滤（例如，如果您选择年份2010，则应显示所有2010年及以上的缩略图），第二个应该过滤到选定的年份（例如，如果选择2010，则应显示所有2010年及以下的缩略图），以便您可以选择应显示的年份范围。

感谢您的帮助！

Answer 1

使用for循环：

var yearStart = $('#yearStart').find(':selected').attr('value');
var yearEnd = $('#yearEnd').find(':selected').attr('value');


$('.thumbnail').css('display','none');


if(ChosenType != "all"){
    for(var i=yearStart; i<=yearEnd ; i++){
      var selector = '.thumbnail';
      selector += '[data-type-option="'+ i+'"]';
      $(selector).show();
    }        
}

创建一个菜单，按年份范围过滤元素

1 个答案: