document.querySelector('.menu').addEventListener('click', ({ target: t }) => {
if (t.tagName === 'A') {
const submenu = [...t.parentNode.children].find(n => n.classList.contains('sub-menu'));
if (submenu) {
submenu.classList.toggle('red');
}
}
});for (const n of document.querySelectorAll('.menu a')) {
n.addEventListener('click', onClick);
}
function onClick() {
this.nextElementSibling?.classList.toggle('red');
}
// или
document.querySelectorAll('.sub-menu').forEach(function(n) {
n.previousElementSibling.addEventListener('click', this);
}, e => e.target.nextElementSibling.classList.toggle('red'));
const map1 = new Map();
map1.set('bar', 'foo');
console.log(map1.delete('bar'));
// expected result: true
// (true indicates successful removal)
console.log(map1.has('bar'));
// expected result: falsemap.get(k1) // ссылается на тот же объект, которым вы задали значение в set
map.get({a:1}) // уже совершенно другой объект
{a:1}, {a:1} // это два разных объекта
map.set({a:2}, 'oops') // вы не сможете достать или удалить это значение, потому как единственная
//ссылка на ключ лежит в самом Мапеfor (let key of map.keys()) {
console.log(map.get(key))
}
Как с этим работать?
<aside class="aside">
<div class="aside-logo">
<div class="aside-logo__item">
<img class="aside-logo__img" src="logo.png" alt="logo" />
</div>
<div class="aside-logo__title">Заголовок</div>
<div class="aside-logo__ico">Иконка</div>
</div>
</aside>
<aside class="aside">
<div class="aside__logo logo">
<div class="logo__pic">
<img src="logo.png" alt="logo" class="logo__img" />
</div>
<div class="logo__title">Заголовок</div>
<div class="logo__ico">Иконка</div>
</div>
</aside>
new Vue({
el: '#app',
data: {
items: [{em: true},{em: true},{em: true}]
},
methods:{
click(item) {
item.em = !item.em
}
}
})<div id="app">
<div class="wrap">
<div class="item" v-for="(item, i) in items" :key="i">
<div class="parent" @click="click(item)">
{{item.em}}
<div class="child" :class="`class${i}`" :style="{background: item.em ? 'blue' : 'red'}">{{ i + 1 }}</div>
</div>
</div>
</div>
</div>data: () => ({
active: null,
}),<div class="item" v-for="i in 5">
<div class="parent" @click="active = active === i ? null : i">
<div class="child" :class="active === i ? 'green' : 'red'">{{ i }}</div>
</div>
</div>data: () => ({
items: Array(5).fill(false),
}),<div class="item" v-for="(n, i) in items">
<div class="parent" @click="$set(items, i, !n)">
<div class="child" :class="{ green: n, red: !n }">{{ i + 1 }}</div>
</div>
</div>props: [ 'text' ],
data: () => ({
active: 0,
}),<div class="item">
<div class="parent" @click="active ^= 1">
<div class="child" :class="[ 'red', 'green' ][active]">{{ text }}</div>
</div>
</div>data: () => ({
items: Array.from({ length: 5 }, (_, i) => `item #${-~i}`),
}),<v-item v-for="n in items" :text="n"></v-item>