#javascript
#javascript
Вопрос:
У меня есть этот код, который может переключаться между элементами, если пользователь открывает элемент, все остальные элементы должны закрываться, и это работает, но если я нажимаю на один и тот же элемент несколько раз, ничего не происходит, и я не могу понять, почему. Мне нужна помощь.
Вот мой код:
const heads = [...document.querySelectorAll(".head")];
const dropdowns = [...document.querySelectorAll(".head-dropdown")];
const activate_filter = document.getElementById("filter-btn");
let isActive = false;
let isFilterActive = false;
let queue = [];
if (!isFilterActive) {
dropdowns.forEach((val, i) => {
val
.querySelector(".dropdown-search")
.setAttribute(
"name",
`${heads[i].querySelector("p").textContent}-search`
);
});
}
activate_filter.addEventListener("click", e => {
dropdowns.forEach((val, i) => {
val.classList.remove("activated");
val.dataset.isActivated = false;
});
if (!isFilterActive) {
heads.forEach((val, i) => {
const p = val.children[0];
p.innerHTML = `<i class='eos-icons'>arrow_drop_down</i>`;
val.addEventListener("click", handleEventAll);
val.style.cursor = "pointer";
});
isFilterActive = true;
} else {
heads.forEach(val => {
const p = val.children[0];
const i = p.querySelector("i");
if (i) {
i.remove();
}
val.removeEventListener("click", handleEventAll);
val.style.cursor = "default";
});
isFilterActive = false;
}
});
function handleEventAll(e) {
const test = e.target.querySelector(".head-dropdown");
test.classList.add("activated");
queue.unshift(test);
if (queue.length > 3) {
queue.pop();
}
dropdowns.forEach((val, i) => {
if (!val.dataset) {
val.dataset.isActivated = false;
}
let t = eval(queue[0].dataset.isActivated);
console.log(t);
if (t) {
console.log("in true", queue[0]);
queue[0].dataset.isActivated = true;
queue[0].classList.toggle("activated");
queue.pop();
} else {
console.log("in false", queue[0].dataset);
queue[0].dataset.isActivated = false;
console.log(queue);
queue[1].classList.remove("activated");
queue.pop();
}
});
}
window.addEventListener("click", e => {});
Элементы добавляются в очередь, и очередь сортирует их, если предыдущий элемент, который был открыт, правильно закрыт, и он открывает новый элемент, на который нажимается. Если щелкнуть один и тот же элемент дважды, очередь закрывает элемент, но не открывает его снова, пока не будет нажат какой-либо другой элемент.
Вот codepen для полного использования: https://codepen.io/darioKolic/pen/eYdYzdy
Комментарии:
1. Вы добавляете активированный класс, а затем снова удаляете его, и добавление, и удаление выполняются в одном и том же событии.
2. Что вы предлагаете?
3. Я переписал функцию handleEventAll, чтобы создать необходимую функциональность без использования очереди. проверьте это codepen.io/WaleedJubeh/pen/rNMNMxR
4. Если это то, что вы хотите, я могу опубликовать это как ответ
5. Вот и все, спасибо. вы можете опубликовать его.
Ответ №1:
Я переписал функцию handleEventAll, чтобы создать необходимую функциональность без использования очереди. проверьте это
Что я сделал, так это сохранил текущее состояние (активированный класс существует или нет) для выбранного элемента, а затем я удаляю весь активированный класс из всех элементов, затем добавляю или удаляю активированный класс, зависит от старого значения.