проверка к масиву

213

12 апреля 2018, 12:51

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

 <div id="change">             //Форма где осущ. выбор                                                                   
      <div class="form-check">
<label class="form-check-label" for="defaultCheck1">
 Выберете свои предпочтения
</label>
      </div>                                                    
      <div class="form-check">
 <input class="form-check-input" type="checkbox" value="" 
 id="defaultCheck1">
 <label class="form-check-label" for="defaultCheck1">
 Непредсказуемые в сюжете  </label>
      </div>
      <div class="form-check">
 <input class="form-check-input" type="checkbox" value="" 
 id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
 Страшные  </label>
       </div>    
       </div>

 <div id="films" class="containers col-md-12"   //блок где появляется 
 рандомный фильм
 style='display: none;'>
                                </div>
<button onclick="vsbl()" type="button" //кнопка при нажатии на которую 
 отображается фильм
class="btn btn-primary btn-xl" style="padding-top:5px;font-size: 15px; 
background-color: #5d5d5d;
border-color: #838382;color:white;">Подобрать Фильм</button>
                            </div>

и сам скрипт подбора

 const button = document.querySelector('button');
    const container = document.querySelector('.containers');
    const iframe = document.createElement('iframe'); //Создаем элемент
    iframe.className = "yourclass"; //Добавляем к нему необходимый класс(ы)
    container.appendChild(iframe); //вставляем как дочерний элемент к 
 определенному контейнеру
    const links = [
        "https://topkino.club/embed/591485/",
        "https://topkino.club/embed/4541/",
        "https://topkino.club/embed/195524/"
    ];
    const getRandomInt = (size = links.length) => {
        return Math.floor(Math.random() * size);
    }
    button.addEventListener('click', () => {
        iframe.src = links[getRandomInt()]; //переназначаем значение 
 атрибута функцией, которая выдает случайные числа
    })
    iframe.setAttribute('allowFullScreen', '');
 function vsbl(){
document.getElementById("films").style.display="block";
  }


  так же для удобства оставлю code Pen https://codepen.io/anon/pen/aYMKgw

Answer 1

Лучше всего сделать массив объектов/словарей, который затем фильтровать на основе введённых параметров. Объект фильма, например, такой:

{
    "title": "Красавица и Чудовище", // заголовок
    "description": "Жили-были ...", // описание
    "url": "http://...ru/...", // ссылка
    // можно указать все жанры по-отдельности
    "is_horror": true, // ужастик или нет
    "is_romantic": false, // романтика или нет
    "is_fantasy": true, // фэнтези или нет
    // или одним массив жанров
    "tags": ["horror", "fantasy"]
}

Затем, когда нужно отобразить, то циклом проходишь весь каталог фильмов и проверяешь на совпадение хотя бы одного жанра с указанными параметрами. Например, так:

// список всех фильмов
var catalog = [];
// конструктор для создания объекта фильм
function Movie(title, description, url, tags) {
    this.title = title;
    this.description = description;
    this.url = url;
    this.tags = tags;
    // можно сразу добавить в каталог
    catalog.push(this);
}
// метод для проверки, является ли фильм подходящим
Movie.prototype.check = function (tags) {
    for (var i = 0; i < tags.length; i++) {
        if (this.tags.includes(tags[i]))
            return true;
    }
    return false;
};
// создаём каталог фильмов
Movie(title, description, url, tags);
...
// массив искомых жанров
var tags = ["horror", "fantasy"];
var results = [];
catalog.forEach(function(el){
    // проверяем каждый фильм по данным жанрам
    if (el.check(tags))
        results.push(el);
});
// теперь в массиве results находятся все подходящие фильма