Хук get не позволяет получить параметры вызова метода
function sequence(functions) {
return new Proxy(functions, {
get(target, key) {
const val = target[key];
return val instanceof Function
? (...args) => {
console.log(`${key} called with arguments: `, args);
return val.apply(target, args);
}
: val;
},
});
}
const groupedArr = arr.reduce((acc, n) => {
const keys = n.slice(0, -1);
let group = acc.find(m => m.length === n.length && keys.every((k, i) => k === m[i]));
if (!group) {
acc.push(group = [ ...keys, 0 ]);
}
group[keys.length] += n[keys.length];
return acc;
}, []);
const groupedArr = arr.reduce((acc, n) => {
const keys = n.slice(0, -1);
const groups = keys.reduce((groups, k) => groups.set(k, groups.get(k) ?? new Map).get(k), acc[1]);
let group = groups.get(acc[2]);
if (!group) {
acc[0].push(group = [ ...keys, 0 ]);
groups.set(acc[2], group);
}
group[keys.length] += n[keys.length];
return acc;
}, [ [], new Map, Symbol() ])[0];
const replaceKeys = (value, replacer) =>
value instanceof Object
? value instanceof Array
? value.map(n => replaceKeys(n, replacer))
: Object.fromEntries(Object
.entries(value)
.map(n => [ replacer(n[0]), replaceKeys(n[1], replacer) ])
)
: value;
const newObj = replaceKeys(obj, k => `${k}_upd`);
function replaceKeys(value, replacer) {
const result = [];
const stack = [];
for (
let i = 0, source = [ [ 0, value ] ], target = result;
i < source.length || stack.length;
i++
) {
if (i === source.length) {
[ i, source, target ] = stack.pop();
} else {
const [ k, v ] = source[i];
const isObject = v instanceof Object;
const newK = target instanceof Array ? k : replacer(k);
target[newK] = isObject ? v.constructor() : v;
if (isObject) {
stack.push([ i, source, target ]);
[ i, source, target ] = [ -1, Object.entries(v), target[newK] ];
}
}
}
return result[0];
}
const regex = /#[a-f\d]+;$/i;
const replacement = '<span class="color" style="background: $&"></span>';
document.querySelectorAll('селектор сами сообразите').forEach(n => {
n.innerHTML = n.innerText.replace(regex, replacement);
});
.product
. Вместо первого .product
нужен тот, внутри которого находится нажатая кнопка:document.querySelector('.wrapper_product')
---> event.target
menu.addEventListener('click', ({ target: t }) => {
if (t.tagName === 'SPAN') {
const parent = t.parentNode;
parent.classList.toggle('active');
for (const n of menu.querySelectorAll('.active')) {
if (n !== parent) {
n.classList.toggle('active', n.contains(parent));
}
}
}
});
- .menu_list_item.active .submenu {
+ .active > .submenu {
- .submenu_list_item.active .product {
+ .active > .product {
const container = document.querySelector('#menu');
const itemSelector = 'li';
const buttonSelector = `${itemSelector} span`;
const activeClass = 'active';
container.addEventListener('click', function(e) {
const item = e.target.closest(buttonSelector)?.closest(itemSelector);
if (item) {
item.classList.toggle(activeClass);
this.querySelectorAll(`.${activeClass}`).forEach(n => {
if (n !== item) {
n.classList.toggle(activeClass, n.contains(item));
}
});
}
});
const items = document.querySelectorAll('.faq__input');
const onChange = ({ target: t }) => t
.closest('.faq__items')
.querySelectorAll('.faq__question--top')
.forEach(n => n.classList.toggle('active', n.nextElementSibling.checked));
items.forEach(n => n.addEventListener('change', onChange));
.faq__item
вместо .faq__question--top
. Если в будущем задумаете стилизовать внутри выбранного .faq__item
элементы, находящиеся за пределами .faq__question--top
, то не придётся переписывать js-код.const itemSelector = '.faq__item';
const radioSelector = '.faq__input';
const activeClass = 'active';
const toggleActiveClass = radioGroupName => document
.querySelectorAll(`${radioSelector}[name="${radioGroupName}"]`)
.forEach(n => n.closest(itemSelector).classList.toggle(activeClass, n.checked));
document.querySelectorAll(radioSelector).forEach(function(n) {
n.addEventListener('change', this);
}, e => toggleActiveClass(e.target.name));
document.addEventListener('change', ({ target: t }) => {
if (t.matches(radioSelector)) {
toggleActiveClass(t.name);
}
});
const result = array2.filter(function(n) {
return this.has(n.code);
}, new Set(array1.map(n => n.value)));
const obj2 = Object.fromEntries(array2.map(n => [ n.code, n ]));
const result = array1.reduce((acc, n) => ((n = obj2[n.value]) && acc.push(n), acc), []);
const result = array2.filter(n => array1.some(m => m.value === n.code));
e.target.dataset.followerStyle
e.target
? Ну, когда вы наводите курсор на слайд с data-атрибутом. На тот слайд, который не видно за вложенной в него картинкой.target
хватать, а пытаться найти у него предка с нужным вам атрибутом. // значения withSeat вместо раскладывания в отдельные переменные собираете в объект
const withSeat = {
adult: 1,
teenager: 1,
babe: 0,
};
const passengers = cabins.flatMap(n => Object
.entries(n)
.flatMap(([ k, v ]) => Array.from(
{ length: v },
() => ({ withSeat: withSeat[k] })
))
);
const obj = Object.fromEntries(Object
.entries(arr.reduce((acc, n) => (
Object.entries(n).forEach(([ k, v ]) => (acc[k] ??= new Set).add(v)),
acc
), {}))
.map(n => [ n[0], n[1].size === 1 ? [...n[1]][0] : null ])
);
formatDate(date) {
const today = new Date();
return [ 'getFullYear', 'getMonth', 'getDate' ].every(n => date[n]() === today[n]())
? 'Today'
: flatpickr.formatDate(date, 'j M');
},
const groupSelector = 'fieldset.js-tree-box';
const mainSelector = 'legend input';
const itemSelector = 'legend + span input';
const activeClass = 'active';
document.addEventListener('change', ({ target: t }) => {
const group = t.closest(groupSelector);
if (group) {
const main = group.querySelector(mainSelector);
const items = [...group.querySelectorAll(itemSelector)];
if (main === t) {
items.forEach(n => n.checked = t.checked);
} else {
main.checked = items.every(n => n.checked);
}
group.classList.toggle(activeClass, main.checked);
}
});
document.querySelector('.result').append(...Array
.from(document.querySelector('.data').cloneNode(true).children, n => [ n, +n.innerText ])
.sort((a, b) => a[1] - b[1])
.map(n => n[0])
);
делегирование не работает
в консоли выдает "e.target.closest is not a function"
const hoverCellNum = hoverCell.getAttribute('data-tdnum');
document.addEventListener('mouseenter', ({ target: t }) => {
if (t.matches?.('td._hight-light__cell')) {
t.closest('tbody').querySelectorAll('.table-big__row').forEach(n => {
n.cells[t.cellIndex].classList.add('_hover');
});
}
}, true);
document.addEventListener('mouseleave', e => {
if (e.target.matches?.('td._hight-light__cell')) {
document.querySelectorAll('._hover').forEach(n => n.classList.remove('_hover'));
}
}, true);