Stack Overflow на русском Asked on November 13, 2021
С помощью прикрепленного скрипта формируются JS-табы, второе слово в <li>
становится вкладками.
Скрипт ищет <li>
c одинаковыми вторыми словами и объединяет их в одну вкладку
Необходимо, чтобы при активации input’ов c name="a",name="b",name="c",
выполнялся переход на сформированную по кусочкам <input value=""
страницу.
Алгоритм:
<ul class="productdetails">
ищем второе слово в заголовкеВ коде прописано данное условие, но он не выполняется. Подсказали, что не слушается третий input, но не могу исправить это. В чем может быть проблема?
let letters = [];
const itemList = [];
document.querySelectorAll('.productdetails li').forEach((el, i) => {
const letter = el.innerText.trim().split(' ')[1];
letters.push(letter);
letters = [...new Set(letters)];
itemList.push({
id: i,
content: el.innerHTML,
letter
});
const lettersMap = letters.map(el => {
return `<label class="example-lk"><input name="b" type="radio" value=${el}>${el}</label>`
});
document.querySelector('.results .tabs').innerHTML = lettersMap.join('')
});
document.querySelectorAll('.tabs input').forEach(tab => {
tab.onclick = (e) => {
const FilteredList = itemList.filter(item => item.letter === e.target.value).map(item => `<li>${item.content}</li>`);
document.querySelector('.results .content').innerHTML = FilteredList
e.target.closest(".results").querySelector(".content").classList.add("show");
const pd = document.querySelector(".productdetails")
if (pd) {
pd.remove()
}
}
});
///// ТУТ ВЫБОР ТРЕХ ПУНКТОВ /////
const inputs = document.querySelectorAll('input');
uncheckInputs(inputs);
const obj = {
a: {
path: '',
isChecked: false
},
b: {
path: '',
isChecked: false
},
c: {
path: '',
isChecked: false
}
}
inputs.forEach(addListener);
function addListener(input) {
input.addEventListener('click', onClickHandler);
}
function onClickHandler(e) {
changeObjectValues(obj[e.target.name], e.target.value, true);
const checkedInputs = getСlosestCheckedInputs(e.target);
if (checkedInputs.length > 0) uncheckInputs(checkedInputs);
if (isAllChecked()) {
const url = 'https://his-srvce.online/' + Object.keys(obj).map(getPath).join('');
location.href = url;
uncheckInputs(inputs);
}
}
function getPath(key) {
return obj[key].path;
}
function isAllChecked() {
return Object.keys(obj).every(isChecked);
}
function isChecked(key) {
return obj[key].isChecked === true;
}
function changeObjectValues(obj, path, isChecked) {
obj.path = path;
obj.isChecked = isChecked;
}
function getСlosestCheckedInputs(target) {
const inputs = target.parentNode.parentNode.querySelectorAll('input[type="checkbox"]');
const checkedInputs = [];
inputs.forEach(function getCheckedInput(input) {
if (input.checked && input != target) checkedInputs.push(input);
});
return checkedInputs;
}
function uncheckInputs(checkedInputs) {
checkedInputs.forEach(function uncheck(input) {
input.checked = false;
})
}
////////////////////////////
document.querySelectorAll('input[type="checkbox"]').forEach(item => {
item.addEventListener("change", function(e) {
if (this.checked) {
var clicked = this;
this.closest(".rower").querySelectorAll('input[type="checkbox"]').forEach(item => {
if (item != this)
item.checked = false;
});
}
});
});
.results {
padding: 10px;
}
.results .tabs li {
display: inline-flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
border: 1px solid red;
}
.content {
display: none;
}
.content.show {
display: initial;
}
.tabs {
display: flex;
justify-content: space-around;
}
.productdetails {
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: -1000;
}
.example-lk {
display: block;
width: 50px;
height: 50px;
border: 1px solid;
}
.content li {
border: 1px solid;
width: 30%;
}
.ex-lb {
border: 1px solid black;
padding: 5px;
font-size: 13px;
}
h3 {
font-size: 14px;
}
<h4>Выберите поломку</h4>
<label class="ex-lb">
<input type="checkbox" value="https://codepen.ru/" name="a">Не работает динамик</label>
<label class="ex-lb">
<input type="checkbox" value="https://codepen.ru/" name="a">Не работает зарядка</label>
<label class="ex-lb">
<input type="checkbox" value="https://codepen.ru/" name="a">Не работает экран</label>
<h4>Выберите бренд</h4>
<div class="results">
<ul class="tabs"> </ul>
<ul class="content">Контент</ul>
</div>
<ul class="productdetails">
<li class="product-container">
<label>
<input type="checkbox" value="https://codepen.ru/" name="a">Чекбокс</label>
<h3 class="prod-list-choose">Телефон Acer</h3> </li>
<li class="product-container">
<label>
<input type="checkbox" value="https://codepen.ru/" name="a">
</label>
<h3 class="prod-list-choose">Телефон Samsung</h3> </li>
<li class="product-container">
<label>
<input type="checkbox" value="https://codepen.ru/" name="a">
</label>
<h3 class="prod-list-choose">Телефон Vivo</h3> </li>
</ul>
Скрипт движется сверху вниз. На момент получения всех инпутов "const inputs = document.querySelectorAll('input');", последнего инпута еще не существует. Создайте его до этой команды, как то так:
document.querySelector("body").insertAdjacentHTML("afterEnd", "<label class='ender'><input type='checkbox' name='c'>Модель A</label>");
const inputs = document.querySelectorAll('input');
Answered by fortavey on November 13, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP