fetch('https://rakipov.ru/web/plan-test/document/information_about_objects.txt') .then((response) => response.arrayBuffer()) .then((data) => { // получаем данные из txt data = new TextDecoder('windows-1251').decode(data); const rows = data.split("="); // массив const rowsO = rows.reduce((a, v) => ({ ...a, [v.trimStart().slice(3,7)]: Object.fromEntries(v.trimStart().slice(7).trim().split(/\n\n/gm).map(str => str.split(/\n|\r|\r\n/gm)))}), {}); // ключ/значение document.querySelectorAll('.info_region[id^="info_"]').forEach((item, index) => { // фильтр let idNum = rowsO[item.id.slice(5)]; let idSvg = document.querySelector('#id_'+item.id.slice(5)); if (idNum && idSvg) { if (idNum["Статус:"] == "Вторая очередь") { item.classList.add('second_stage'); idSvg.classList.add('second_stage'); } else if (idNum["Статус:"] == "Забронирован") { item.classList.add('booked'); idSvg.classList.add('booked'); } else if (idNum["Статус:"] == "Продан") { item.classList.add('sold'); idSvg.classList.add('sold'); } else if (idNum["Статус:"] == "Свободен") { item.classList.add('free'); idSvg.classList.add('free'); } item.querySelector(".info_region_square").innerHTML = idNum["Площадь участка:"]; item.querySelector(".info_region_cost").innerHTML = idNum["Стоимость участка в собственность:"]; item.querySelector(".info_region_quarter").innerHTML = idNum["Квартал:"]; if (idNum["Квартал:"] == "Прибрежный") { item.classList.add('pribrezhnyj'); } else if (idNum["Квартал:"] == "Уютный") { item.classList.add('uyutnyj'); } else if (idNum["Квартал:"] == "Чемпионов") { item.classList.add('chempionov'); } else if (idNum["Квартал:"] == "Олимпийский") { item.classList.add('olimpijskij'); } else if (idNum["Квартал:"] == "Солнечный") { item.classList.add('solnechnyj'); } else if (idNum["Квартал:"] == "Заповедный") { item.classList.add('zapovednyj'); } if (idNum["Электричество (точка подключения):"].slice(0,3) == "Нет") { item.classList.add('electric_no'); } else { item.classList.add('electric_yes'); } if (idNum["Линия газоснабжения (точка подключения):"].slice(0,3) == "Нет") { item.classList.add('gas_no'); } else { item.classList.add('gas_yes'); } if (idNum["Граница с лесом:"].slice(0,3) == "Нет") { item.classList.add('border_no'); } else { item.classList.add('border_yes'); } } }) const sheetCSS = new CSSStyleSheet(); sheetCSS.replace(".info_region:not(.sold, .booked, .second_stage, .free), .info_region:not(.electric_yes, .electric_no), .info_region:not(.gas_yes, .gas_no), .info_region:not(.border_yes, .border_no), .info_region:not(.pribrezhnyj, .uyutnyj, .chempionov, .olimpijskij, .solnechnyj, .zapovednyj) {display: none;}"); document.adoptedStyleSheets = [sheetCSS]; let status = document.querySelector('.panel .status_select'); let electricity = document.querySelector('.panel .electricity_select'); let gasification = document.querySelector('.panel .gasification_select'); let border = document.querySelector('.panel .border_select'); let quarter = document.querySelector('.panel .quarter_select'); function filterMy(){ let textCSS = ''; let statusV = status.options[status.selectedIndex].value; textCSS += '.info_region:not(.' + statusV + '), '; let electricityV = electricity.options[electricity.selectedIndex].value; textCSS += '.info_region:not(.' + electricityV + '), '; let gasificationV = gasification.options[gasification.selectedIndex].value; textCSS += '.info_region:not(.' + gasificationV + '), '; let borderV = border.options[border.selectedIndex].value; textCSS += '.info_region:not(.' + borderV + '), '; let quarterV = quarter.options[quarter.selectedIndex].value; textCSS += '.info_region:not(.' + quarterV + ')'; sheetCSS.replace(textCSS + ' {display: none;}'); console.log(sheetCSS); } status.addEventListener("input", filterMy); electricity.addEventListener("input", filterMy); gasification.addEventListener("input", filterMy); border.addEventListener("input", filterMy); quarter.addEventListener("input", filterMy); });