.lists-app
- const lists = new Array(10)
- const items = new Array(3)
each i, idx in lists
button(
data-list-toggle=`${idx}`
) open #{idx + 1}
ul.lists-app__list(
data-list=`${idx}`
)
each i, idx in items
li list elem #{idx + 1}.lists-app
&__list
display: none
&--open
display: blockconst rootClass = 'lists-app'
const openClass = 'lists-app__list--open'
const $listsRoot = document.querySelector(`.${rootClass}`)
const findList = idx => {
return $listsRoot.querySelector(`[data-list='${idx}']`)
}
const closeList = $el => {
$el.classList.remove(openClass)
}
const openList = $el => {
$el.classList.add(openClass)
}
const isOpen = $el => $el.classList.contains(openClass)
const getOpenList = () => {
return $listsRoot.querySelector(`.${openClass}`)
}
$listsRoot.addEventListener('click', e => {
if (!e.target.hasAttribute('data-list-toggle')) {
return
}
const idx = e.target.dataset.listToggle
const $list = findList(idx)
if (isOpen($list)) {
closeList($list)
return
}
const $openList = getOpenList()
$openList ? closeList($openList) : null
openList($list)
})
const user = {
name: 'Nikola',
age: 25
}
console.log(user)
setTimeout(() => {
user.age = 45
console.log(user)
}, 5000)// вешаем обработчик на документ
// если повесите на каждую ссылку - то кол-во обработчиков будет равно кол-ву ссылок
// так себе идея
document.addEventListener('click', e => {
// определяем, что клик произошёл на ссылке
if (e.target.nodeName === 'A') {
// отменяем переход по ссылке
e.preventDefault()
console.log('do some there')
}
})// объявляем функцию
const count = () => {
// используем querySelectorAll чтобы указать, что нужны только tr в tbody
let list = document.querySelectorAll("#TheTable tbody tr");
// выводим значение 3 input
list.forEach( tr => console.log( tr.querySelectorAll('input')[3].value ));
}
// вызываем функцию
count();<div class="div-container"></div>const slidesContainer = document.querySelector('.div-container')
let i = 0
let slides = []
while ( i < 10) {
slides.push(`
<div>
<img src="string-name${ i }.png"/>
</div>
`)
i++
}
slidesContainer.insertAdjacentHTML(
'beforeend',
slides.join('')
)<input type="button" value="нажми меня" name="Peremeshenie1" onClick="doIt()">function doIt() {
setInterval(Peremeshenie, 20);
}<input type="button" value="нажми меня" name="Peremeshenie1" onClick="setInterval(Peremeshenie, 20);">