@Stalk007

Как исправить баги с фильтрации?

Как сделать чтобы чекбоксы и ползунок работали совместно на нативном javascript? Чтобы я например выставил цену не больше 2000 руб и выбрал Асус 2019 и чтобы мне только он выводился

HTML:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <div class="conteiner">
        
        <div class="conteiner-filter">
            <h4>Цена</h4>
            <input class="range" type="range" min="1000" max="4000">
            <p class="h1"></p>
            <h4>Название компании</h4>
            <p class="name"><input type="checkbox" class="input">ASUS</p>
            <p class="name"><input type="checkbox" class="input">Lenovo</p>
            <p class="name"><input type="checkbox" class="input">Dell</p>
            <h4>Дата выхода</h4>
            <p class="date"><input type="checkbox" class="input-date">2018</p>
            <p class="date"><input type="checkbox" class="input-date">2019</p>
            <p class="date"><input type="checkbox" class="input-date">2020</p>
        </div>
        <div class="divace">
            <div class="laptop 0">
                <img src="https://content2.onliner.by/catalog/device/header/fbcdeb5414695db4e8f988dc60dd517a.jpeg"
                    alt="">
                <div class="laptop-xp">
                    <p class="laptop-name">Фирма: ASUS</p>
                    <p class="laptop-prise">Цена: 1750 руб.</p>
                    <p class="laptop-yeur 1">Год выхода: 2019</p>
                </div>
            </div>
            <div class="laptop 0">
                <img src="https://content2.onliner.by/catalog/device/header/fbcdeb5414695db4e8f988dc60dd517a.jpeg"
                    alt="">
                <div class="laptop-xp">
                    <p class="laptop-name">Фирма: ASUS</p>
                    <p class="laptop-prise">Цена: 3000 руб.</p>
                    <p class="laptop-yeur 2">Год выхода: 2020</p>
                </div>

            </div>
            <div class="laptop 1">
                <img src="https://content2.onliner.by/catalog/device/header/ceb2db608e37ad41294857f140db8275.jpeg"
                    alt="">
                <div class="laptop-xp">
                    <p class="laptop-name">Фирма: Lenovo</p>
                    <p class="laptop-prise">Цена: 1300 руб.</p>
                    <p class="laptop-yeur 1">Год выхода: 2019</p>
                </div>

            </div>
            <div class="laptop 2">
                <img src="https://content2.onliner.by/catalog/device/header/429274989c772c8a8fe46e92c58a550c.jpeg"
                    alt="">
                <div class="laptop-xp">
                    <p class="laptop-name">Фирма: Dell</p>
                    <p class="laptop-prise">Цена: 1450 руб.</p>
                    <p class="laptop-yeur 0">Год выхода: 2018</p>
                </div>
            </div>
        </div>
        <div class="div-conteiner-form">
            <div class="form">
                <p class="p-url">URL Картинки: <textarea class="in-url"></textarea></p>
                <p class="p-name">Фирма: <input type="text" class="in-name"></p>
                <p class="p-prise">Цена: <input type="number" class="in-prise"></p>
                <p class="p-yeur">Год выхода: <input type="number" class="in-yeur"></p>
                <button class="btn">Вывести</button>
            </div>
        </div>
        
    </div>
        <button class="conteiner-form slaid">Добавить товар</button>
    <script src="script.js"></script>
</body>

</html>


CSS:
body {
    background-color: rgb(94, 94, 189);
}
.conteiner {
    background-color: blanchedalmond;
    width: 95%;
    height:650px;
    margin: auto;
}
.conteiner-filter {
    background-color: rgb(247, 202, 136);
    margin: 0px;
    width: 200px;
    height:650px;
}
.divace {
    display: grid;
    grid-template-columns: repeat(2, 620px); 
    padding-top: 50px;
    grid-row-gap: 20px;
    margin-left: 200px;
    margin-top: -600px;
}
.laptop {
    background-color: cornflowerblue;
    width: 600px;
    height: 120px;   
}
img {
    width: 170px;
    height: 120px;
}

.form {
    position: static;
    background-color: blueviolet;
    width: 277px;
    margin-left: 200px;
}
.conteiner-form {
    margin-left: 25px;
    border: none;
}
.laptop-xp {
    float: right;
    margin-right: 300px;
}


JS:

document.querySelector('.range').oninput = () => {
  let a = document.querySelector('.range').value;
  let laptopPrise = document.querySelectorAll('.laptop-prise');
  let laptop = document.querySelectorAll('.laptop');
  for (let i = 0; i < laptopPrise.length; i++) {
    for (let i = 0; i < laptop.length; i++) {
      if (laptopPrise[i].textContent > `Цена: ${a} руб.`) {
        laptop[i].style.display = 'none';
      } else {
        laptop[i].style.display = 'block';
      }
    }
    document.querySelector('.h1').innerHTML = a + " Руб.";
  }
}

function fun1() {
  for (let i = 0; i < 3; i++) {
    document.getElementsByClassName("input")[i].addEventListener("change", function (evt) {
      let targetCheked = evt.target.checked
      let type = i;
      changeSearchS(type, targetCheked)
    });
    let searchSettings = { 0: 0, 1: 0, 2: 0 };
    function changeSearchS(type, targetCheked) {
      if (targetCheked) { searchSettings[type] = 1; }
      else { searchSettings[type] = 0; }
      changeList()
    }
    let laptop = document.getElementsByClassName("laptop");
    function changeList() {
      for (let i = 0; i < laptop.length; i++) {
        if (searchSettings[laptop[i].classList[1]]) {
          laptop[i].style.display = '';
        } else {
          laptop[i].style.display = 'none';
        }
      }
    }
  }
}
fun1();

function fun2() {
  for (let i = 0; i < 3; i++) {
    document.getElementsByClassName("input-date")[i].addEventListener("change", function (evt) {
      let targetCheked = evt.target.checked
      let type = i;
      changeSearchS(type, targetCheked)
    });
  }
  let searchSettings = { 0: 0, 1: 0, 2: 0 };
  function changeSearchS(type, targetCheked) {
    if (targetCheked) { searchSettings[type] = 1; }
    else { searchSettings[type] = 0; }
    changeList()
  }
  let laptopYeur = document.getElementsByClassName("laptop-yeur");
  function changeList() {
    for (let i = 0; i < laptopYeur.length; i++) {
      let laptop = document.getElementsByClassName("laptop");
      for (let i = 0; i < laptop.length; i++) {
        if (searchSettings[laptopYeur[i].classList[1]]) {
          laptop[i].style.display = '';
        } else {
          laptop[i].style.display = 'none';
        }
      }

    }
  }
}
fun2();

let form = document.querySelector('.form');
form.style.display = "none";
let btnSlaid = document.querySelector('.slaid');
btnSlaid.onclick = () => {

  if (form.style.display === "block") {
    form.style.display = "none";
    btnSlaid.textContent = 'Добавить товар';
  } else {
    form.style.display = "block";
    btnSlaid.textContent = 'Убрать форму';
  }
}
document.querySelector('.btn').onclick = () => {
  const divace = document.querySelector('.divace');
  let index, yeur;
  let inName = document.querySelector('.in-name');
  let inPrise = document.querySelector('.in-prise');
  let inYeur = document.querySelector('.in-yeur');
  let inURL = document.querySelector('.in-url');
  if (inName.value === 'ASUS') {
    index = 0;
  } else if (inName.value === 'Lenovo') {
    index = 1;
  } else if (inName.value === 'Dell') {
    index = 2;
  }
  if (inYeur.value === '2018') {
    yeur = 0;
  } else if (inYeur.value === '2019') {
    yeur = 1;
  } else if (inYeur.value === '2020') {
    yeur = 2;
  }
  divace.insertAdjacentHTML('beforeend',
    `<div class="laptop ${index}">
      <img src='${inURL.value}' class="img">
      <div class="laptop-xp">
      <p class="laptop-name">Фирма: ${inName.value}</p>
      <p class="laptop-prise">Цена: ${inPrise.value} руб.</p>
      <p class="laptop-yeur ${yeur}">Год выхода: ${inYeur.value}</p>
      </div>
    </div>`)
  inURL.value = '';
  inName.value = '';
  inPrise.value = '';
  inYeur.value = '';
}

  • Вопрос задан
  • 155 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Всё настолько плохо, что исправлять нечего.

Можно переписать с нуля.
document.querySelector('.container-filter').addEventListener('input', function() {
  const maxPrice = +this.querySelector('.range').value;
  const brands = [...this.querySelectorAll('.input:checked')].map(n => n.parentNode.innerText);
  const years = [...this.querySelectorAll('.input-date:checked')].map(n => n.parentNode.innerText);

  document.querySelectorAll('.device .laptop').forEach(n => {
    const price = parseInt(n.querySelector('.laptop-price').innerText.split(': ')[1]);
    const brand = n.querySelector('.laptop-name').innerText.split(': ')[1];
    const year = n.querySelector('.laptop-year').innerText.split(': ')[1];

    n.style.display = (
      (maxPrice >= price) &&
      (!brands.length || brands.includes(brand)) &&
      (!years.length || years.includes(year))
    )
      ? 'block'
      : 'none';
  });
});

Говнокод тот ещё получается - но тут уж таков исходный материал.

Вам стоит рассмотреть вариант с хранением информации о товарах в массиве, чтобы не приходилось выдирать её из разметки. Как оно могло бы быть.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Artezio Санкт-Петербург
от 160 000 до 220 000 ₽
07 мар. 2021, в 23:34
5000 руб./за проект
07 мар. 2021, в 23:14
10000 руб./за проект