使用jQuery UI MultiSelect小工具过滤div类-如何在选中多个框时进行过滤？

Question

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

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

对我没有帮助的...but。请帮我把这个过滤器修好。谢谢!

<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();