const input = document.querySelector('.inputprice');
const container = document.querySelector('.inner');
const itemSelector = '.box';
const buttonSelector = `${itemSelector} .btn`;
const valueSelector = `${itemSelector} .box-title`;
container.addEventListener('click', ({ target: t }) => {
const item = t.closest(buttonSelector)?.closest(itemSelector);
if (item) {
input.value = item.querySelector(valueSelector).innerText;
}
});
// или
const onClick = el => input.value = el.textContent.trim();
container.querySelectorAll(buttonSelector).forEach(function(n, i) {
n.addEventListener('click', onClick.bind(null, this[i]));
}, document.querySelectorAll(valueSelector));
.comment-item.active .comment-item__form {
display: block;
}
const itemSelector = '.comment-item';
const buttonSelector = '.comment-item__reply';
const activeClass = 'active';
document.addEventListener('click', e => {
const item = e.target.closest(buttonSelector)?.closest(itemSelector);
if (item) {
document.querySelectorAll(itemSelector).forEach(n => {
n.classList.toggle(activeClass, n === item);
});
}
});
const numChunks = 6;
const chunkLen = arr.length / numChunks | 0;
const chunks = Array.from({ length: numChunks }, (n, i) => {
return arr.slice(i * chunkLen, i === numChunks - 1 ? arr.length : (i + 1) * chunkLen);
});
removeEventListener
не то, что передавали в addEventListener
. Смотрите сами:document.addEventListener('click', clickerOut(parent));
document.removeEventListener('click', clickerOut);
clickerOut(parent)
и clickerOut
- это что по-вашему, одно и то же? Никак нет.function clickerOut(parent) {
return function handler(e) {
...
document.removeEventListener('click', handler);
}
}
const arr = Object
.entries(obj)
.reduce((acc, [ k, v ]) => (
k = k.match(/([a-z]+)(\d+$)/),
(acc[k[2]] ??= {})[k[1]] = v,
acc
), []);
const os = Object.fromEntries(arr.map(n => [ n.system, 0 ]));
const count = arr.reduce((acc, n) => ((acc[n.name] ??= { ...os })[n.system]++, acc), {});
console.log(Object
.entries(count)
.map(n => `${n[0]}: ${Object.entries(n[1]).map(m => m.join(' - ')).join(', ')}`)
.join('\n')
);
$('.el1--closed').one('click', function() {
$(this)
.siblings()
.slideToggle();
});
$('.block').on('click', '.el1--closed', function() {
$(this)
.removeClass('el1--closed')
.siblings()
.slideToggle();
});
кнопка будет disabled, если все три поля input будут пустые и наоборот, если все поля заполнены, то кнопка станет enabled
const button = document.querySelector('селектор кнопки');
const inputs = [...document.querySelectorAll('селектор инпутов')];
const onInput = () => button.disabled = inputs.every(n => !n.value);
inputs.forEach(n => n.addEventListener('input', onInput));
onInput();
every
будет some
. $('.cart_qty').change(({ target: t }) => {
$(t)
.closest('селектор блока с товаром')
.find('.shopcart__item-total')
.text(function() {
return t.value * this.dataset.price;
});
});
document.querySelectorAll('.cart_qty').forEach(n => n.addEventListener('change', onChange));
function onChange({ target: t }) {
const total = t.closest('селектор блока с товаром').querySelector('.shopcart__item-total');
total.innerText = t.value * total.dataset.price;
}
function xxx(key) {
let val = entityTree[key];
const nextKey = Array.isArray(val) && (val = [...val], val.pop());
return val ? [].concat(key, val, xxx(nextKey)) : [];
}
if (obj.hasOwnProperty(key)) {
if (!Array.isArray(obj[key])) {
obj[key] = [ obj[key] ];
}
obj[key].push(val);
} else {
obj[key] = val;
}
это для массива, а у меня объект
Array.isArray
проверяйте instanceof Object
. А ключ нового свойства - это количество уже существующих свойств:if (obj.hasOwnProperty(key)) {
if (!(obj[key] instanceof Object)) {
obj[key] = { 0: obj[key] };
}
obj[key][Object.keys(obj[key]).length] = val;
} else {
obj[key] = val;
}
for (let i = times.length; i--; ) {
const d = new Date(times[i]);
if (d < date) {
result.children[i].classList.add('active');
result.children[i + 1]?.classList.add('next');
break;
}
}
users.filter(u => u.services.some(s => filterBy.every(f => s.categories.includes(f))))
users.filter(u => filterBy.every(f => u.services.some(s => s.categories.includes(f))))
users.filter(u => filterBy.some(f => u.services.some(s => s.categories.includes(f))))
$('.products').append(data.uslugi.map(item => `
<div class="item p-2">
<img src="${item.img}" alt="" class="p-2 h-64 mx-auto">
<h2 class="text-lg text-center font-semibold p-1 pb-0">${item.title}</h2>
<div class="flex flex-wrap w-56 mx-auto py-2 pt-0 text-lg sizes">
${item.size.map(size => `
<div class="p-1 flex size">
<span class="px-2 rounded-full size active">${size}</span>
</div>
`).join('')}
</div>
</div>
`).join(''))
const form = document.querySelector('.form');
const items = [...form.querySelectorAll('.form__item')];
form.addEventListener('change', function(e) {
const index = items.indexOf(e.target.closest('.form__item'));
form.querySelector('.form__progress-line').style.width = (index + 2) * 100 / items.length + '%';
setTimeout(() => {
items[index]?.classList.remove('form__item--active');
items[index + 1]?.classList.add('form__item--active');
if (index + 1 === items.length) {
form.style.display = 'none';
document.querySelector('.result').classList.add('result--active');
}
}, 1000);
});
form.dispatchEvent(new Event('change'));