const container = document.querySelector('.box');
container.addEventListener("click", ({ target: t }) => {
if(t.classList.contains("btn")) {
const card = t.closest(".item");
card && card.classList.add("active");
}
})
document.querySelectorAll('.item').forEach(v => {
v.querySelector(".btn").addEventListener('click', () => {
v.classList.add('active');
});
});
Не пойму в чем дело, разъясните пожалуйста.
console.log
в определенном месте своего кода:document.querySelector('.list').addEventListener('click', (event) => {
const target = event.target
if (target.classList.contains('delete')) {
const task = document.querySelector(`[data-id="${target.dataset.delete}"]`)
// Посмотрим что будет выводиться в консоль?
console.log(target.dataset.id)
deleteTask(task)
}
})
const modal = document.querySelector(".modal");
const listbox = document.querySelector(".list");
const modalCancelButton = modal.querySelector(".cancel");
const modalConfirmButton = modal.querySelector(".confirm");
let currentTaskID = null;
listbox.addEventListener("click", ({ target: t }) => {
if (t.classList.contains("delete")) {
currentTaskID = t.dataset.delete;
modal.classList.remove("hidden");
}
});
modalCancelButton.addEventListener("click", () => {
modal.classList.add("hidden");
currentTaskID = null;
});
modalConfirmButton.addEventListener("click", () => {
modal.classList.add("hidden");
deleteTask(currentTaskID);
});
const deleteTask = id => id && listbox.querySelector(`[data-id="${id}"]`).remove();
Но вылазит то один баг, то другой. Уже нервишки здают...
Есть ли хорошие конвертеры из jquery в js?
Добавил бургер меню на свой сайт портфолио.
<script src="/source/js/script.js"></script>
- <script src="/source/js/script.js"></script>
+ <script src="source/js/script.js"></script>
const swiper = new Swiper('.swiper', {
breakpoints: {
640: {
slidesPerView: 2,
},
768: {
slidesPerView: 4,
},
1024: {
slidesPerView: 5,
},
}
});
function getAllNextSiblings(el, subElement, selectorFilter) {
let collection = [];
let target = el.nextElementSibling;
while (target) {
if (target.matches(subElement)) break;
if (selectorFilter && !target.matches(selectorFilter)) {
target = target.nextElementSibling;
continue;
}
collection.push(target.textContent.trim());
target = target.nextElementSibling;
}
return collection;
}
// собираем заголовки и параграфы в массив объектов
// разбивая полученные данные на группы
[...document.querySelectorAll("h1")].map(target => {
return {
heading: target.textContent,
paragraphs: getAllNextSiblings(target, "h1", "p")
};
});
<div class="container">
<h1>Глава 1</h1>
<p>Текстовой блок - 1</p>
<p>Текстовой блок - 2</p>
<p>Текстовой блок - 3</p>
<p>Текстовой блок - 4</p>
<h1>Глава 2</h1>
<p>Текстовой блок - 1</p>
<p>Текстовой блок - 2</p>
<p>Текстовой блок - 3</p>
</div>
[
{
"heading": "Глава 1",
"paragraphs": [
"Текстовой блок - 1",
"Текстовой блок - 2",
"Текстовой блок - 3",
"Текстовой блок - 4"
]
},
{
"heading": "Глава 2",
"paragraphs": [
"Текстовой блок - 1",
"Текстовой блок - 2",
"Текстовой блок - 3"
]
}
]
const slider = new Slider();
const breakpoint = window.matchMedia("(min-width: 1200px)");
if (breakpoint.matches) {
slider.init();
}
const slider = new Slider();
const breakpoint = window.matchMedia("(max-width: 1200px)");
const breakpointChecker = () => {
if (breakpoint.matches) {
slider.init();
} else {
slider.destroy();
}
};
breakpoint.addEventListener("change", breakpointChecker);
breakpointChecker();
init()
и destroy()
или аналогичные методы для включения и отключения слайдера. Так вот, используя эти методы в связке с matchMedia()
, можно добиться желаемого результата.// если ширина окна больше или равна 1200px,
// выполняем инициализацию слайдера
if(window.innerWidth >= 1200) {
slider.init();
}
position: sticky
, так как не является прямым дочерним элементом блока, внутри которого и нужна липкая навигация. Рекомендую почитать как на самом деле работает position: sticky
.function myAwesomeFunction() {
if(!document.querySelector("#target")) return;
//some code
}
if(document.querySelector("#target")) {
myAwesomeFunction();
}
Почему transition не срабатывает при скрытии элемента?
- transition: opacity 0.3s;
+ transition: opacity 0.3s, visibility 0.3s;
.block {
width: 250px;
height: 250px;
background: #eee;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
.block-active {
opacity: 1;
visibility: visible;
}
function show() {
const element = document.getElementById("block");
element.classList.toggle("block-active");
}
function show() {
const element = document.getElementById("block");
switch (Boolean(element.classList.contains("block-active"))) {
case false:
return element.classList.add("block-active");
case true:
return element.classList.remove("block-active");
}
}
.tabs-panels__panel {
display: none;
}
.tabs-panels__panel-active {
display: block;
}
<div id="tabs" class="tabs">
<div class="tabs__nav">
<button class="tabs-nav__button tabs-nav__button-active" data-tabs-target="tabs-panel-1">
Section 1
</button>
<button class="tabs-nav__button" data-tabs-target="tabs-panel-2">
Section 2
</button>
</div>
<div class="tabs__panels">
<div id="tabs-panel-1" class="tabs-panels__panel">
<div class="tabs-panels-panel__container">
Content Of Section 1
</div>
</div>
<div id="tabs-panel-2" class="tabs-panels__panel tabs-panels__panel-active">
<div class="tabs-panels-panel__container">
Content Of Section 2
</div>
</div>
</div>
</div>
const container = document.querySelector("#tabs");
container.addEventListener("click", ({ target: t }) => {
if (t.classList.contains("tabs-nav__button")) {
const tabsTriggerButton = container.querySelectorAll(".tabs-nav__button");
const tabsContentPanels = container.querySelectorAll(".tabs-panels__panel");
const currentPanelID = t.dataset.tabsTarget;
if (!currentPanelID) return;
tabsTriggerButton.forEach(v => v.classList.remove("tabs-nav__button-active"));
t.classList.add("tabs-nav__button-active");
tabsContentPanels.forEach(v => {
v.id === currentPanelID ?
v.classList.add("tabs-panels__panel-active") :
v.classList.remove("tabs-panels__panel-active");
});
}
});
Как от этого защититься?
document.addEventListener("click", ({ target }) => {
if (target.classList.contains("lk-addapp-ajax-block")) {
const value = target.querySelector("input").value;
alert(value);
}
});
.lk-addapp-ajax-block * {
pointer-events: none;
}