Массив атрибутов для фильтрующих элементов

Question

Массив атрибутов для фильтрующих элементов

0

Я хочу сортировать набор фильмов по нескольким атрибутам, таким как жанр или формат. Идея состоит в том, что пользователь выбирает с элементами флажка тип фильмов, которые он хочет отображать на экране. Мой вопрос: как можно вставить несколько атрибутов, например, вставить несколько имен, например массив, чтобы их отфильтровать?

<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>

Alvaro Gomez 11 дек. 2013, в 23:37

Источник

1

Не могу помочь, если мы не знаем, как вы планировали, чтобы это сработало. Как насчет того, чтобы показать нам некоторый код, который вы пытались использовать для получения эффекта фильтрации - то есть этот массив атрибутов для фильтрации и как проверить каждый элемент
megawac 11 дек. 2013, в 21:49

Теги:

jquery

html5

dom

1 ответ

Ещё вопросы

Не могу помочь, если мы не знаем, как вы планировали, чтобы это сработало. Как насчет того, чтобы показать нам некоторый код, который вы пытались использовать для получения эффекта фильтрации - то есть этот массив атрибутов для фильтрации и как проверить каждый элемент

Pavlo · Accepted Answer · 2013-12-11T20-58-00.000Z

Предполагая, что фильмы представлены массивом:

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/