Question

我想通过几种属性（如流派或格式）对一组电影进行排序。想法是用户使用复选框元素选择他想要在屏幕上显示的电影类型。我的问题是，怎么能插入几个属性，例如插入几个像数组一样的名称来过滤它们？

<div id="filters" class="filters">
  <strong>Format:&nbsp</strong>
    <input type="checkbox" name="format" value="Standard">Standard &nbsp&nbsp
    <input type="checkbox" name="format" value="3D">3D &nbsp&nbsp
    <input type="checkbox" name="format" value="Imax">Imax <br>  

  <strong>Genre:&nbsp</strong>
    <input type="checkbox" name="genre" value="comedy">Comedy &nbsp&nbsp
    <input type="checkbox" name="genre" value="drama">drama &nbsp&nbsp
    <input type="checkbox" name="genre" value="sciencefiction">Science fiction &nbsp&nbsp
    <input type="checkbox" name="genre" value="horror">Horror <br>

</div>

Answer 1

假设电影用数组表示：

var movies = [
  {
    title: 'Avatar',
    format: '3D',
    genre: 'sciencefiction'
  },
  {
    title: 'Saw',
    format: 'Standard',
    genre: 'horror'
  }
];

您需要根据选中的复选框过滤此数组。您可以在事件监听器中执行此操作：

// Some code skipped for brewity

$controls.on('change', function () {
    var formats = $formats.filter(':checked').map(getValue).get();
    var genres = $genres.filter(':checked').map(getValue).get();

    var filtered = movies.filter(function (e) {
        var formatMatch = formats.length === 0 || formats.indexOf(e.format) > -1;
        var genreMatch = genres.length === 0 || genres.indexOf(e.genre) > -1;

        return formatMatch && genreMatch;
    });

    render($output, filtered);
});

完整演示：http://jsfiddle.net/V4aW2/

过滤元素的属性数组

1 个答案: