选中时jQuery显示特定类别的所有项目

Question

我确实坚持以下几点：我需要根据数据属性值过滤大量项目，我已经做到了这一点，问题是当我想显示属于特定选择的所有项目时。 我尝试在html的同一元素中添加多个数据属性，但是我发现这是不允许的：还使用了if条件，其中我尝试使用if值不是'all'而不是...来分隔值，但是还没有取得了任何成功。 这就是我最后的工作代码的结尾。

HTML：

<select id="langOption" class="filterOptions">
    <option data-lang-option="all" value="all">All</option>
    <option data-lang-option="english" value="en">English</option>
    <option data-lang-option="spanish" value="sp">Spanish</option>
</select>

<select id="categoryOption" class="filterOptions">
    <option data-category-option="all" value="all">All</option>
    <option data-category-option="humour" value="hu">Humour</option>
    <option data-category-option="romance" value="ro">Romance</option>
</select>

<div class="displayBox" data-lang-option="english" data-category-option="humour">
    First Box English
</div>

<div class="displayBox" data-lang-option="spanish" data-category-option="humour">
    First Box Spanish
</div>

<div class="displayBox" data-lang-option="english" data-category-option="humour">
    Second Box English
</div>

<div class="displayBox" data-lang-option="spanish" data-category-option="romance">
    Second Box Spanish
</div>

JS：

$('.filterOptions').change(function(){

    var theChosenLang = $('#langOption').find(':selected').attr('data-lang-option');

    var theChosenCat = $('#categoryOption').find(':selected').attr('data-category-option');


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

    $('.displayBox[data-lang-option="' + theChosenLang + '"][data-category-option="'+ theChosenCat +'"]').fadeIn();

}); 

有人可以帮我这个忙，以便在全部选中后，属于该选择的所有元素也都属于其他选择值。 非常感谢

Answer 1

我的建议是使用一个变量来存储选择器的名称，如果选择的选项不是全部，则将其作为data-attribute过滤器添加到选择器中。 否则，不要完全过滤该选项-表示全部显示。

希望我能很好地理解您，它将解决您的问题。

    $('.filterOptions').change(function(){

    var theChosenLang = $('#langOption').find(':selected').attr('data-lang-option');

    var theChosenCat = $('#categoryOption').find(':selected').attr('data-category-option');


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

    if(theChosenLang != "all"){
        selector += '[data-lang-option="'+ theChosenLang +'"]';
    } 
    if(theChosenCat != "all"){
        selector += '[data-category-option="'+ theChosenCat +'"]';
    }

    $(selector).fadeIn();

}); 

的jsfiddle