使用 jQuery UI MultiSelect Widget 过滤 div 类-选中多个框时如何过滤？

Question

这个问题实际上适用于使用任何一组复选框进行过滤。我正在使用 jQuery UI MultiSelect 小部件按类名过滤产品。我的代码在仅选中一个框时效果很好，但在选择多个框时不返回任何结果。我想我需要以某种方式映射一个数组，但我不确定该怎么做。小部件文档说要这样做：

var array_of_checked_values = $("select").multiselect("getChecked").map(function(){
   return this.value;   
}).get();

...但这对我没有帮助。请帮我让这个过滤器工作。谢谢！

<div class="main">
    <article class="contemporary"></article>
    <article class="abstract"></article>
    <article class="impressionist"></article>
</div>

<select id="filterGenre" name="filterGenre" multiple="multiple">
    <option value="abstract">Abstract </option>
    <option value="contemporary">Contemporary </option>
    <option value="impressionist">Impressionist </option>
</select>
<button class="submitFilters" type="button">GO</button>


//creates the multiselect widget: 
$("#filterGenre")
   .multiselect({
      noneSelectedText: 'Select Genre',
      selectedText: 'Select Genre',
      minWidth: 120
   });
//a button to submit the form selections: 
$(function() {
        $( "button.submitFilters" ).button({
            icons: {
                primary: "ui-icon-triangle-1-e"
            },
        });
    });

//the filter actions: 
$('button.submitFilters').click(function() {
        var genreVal = $('#filterGenre').val();
    $('.main article').hide();
    $('.main article[class*=' + genreVal + ']').show();
});

Answer 1

我用四分之一的字问了这个问题，并立即得到了答案（有时会有所帮助）。解决这个问题的关键是“.join”......必须加入数组以按类过滤产品。我错误地定义了我的“genreVal”变量......应该这样做：

var genreVal = $("#filterGenre").multiselect("getChecked")
                .map(function(){return "." + this.value; })
                .get()
                .join(); //<--the missing link...

//then i used: 

    $('.main article').hide();
    $('.main article[class*=' + genreVal + ']').show();