button с классами .tool и .название цвета
let color = '#000';
document.querySelector('селектор контейнера с кнопками').addEventListener('click', e => {
if (e.target.classList.contains('tool')) {
color = e.target.dataset.color;
}
});
document.querySelector('селектор контейнера с "пикселями"').addEventListener('click', e => {
if (e.target.classList.contains('pixel')) {
e.target.style.backgroundColor = color;
}
});
filterBox.forEach(n => {
n.classList.toggle('none', ![ 'all', n.dataset.work ].includes(filterBtn));
});
const element = document.querySelector(`.js-filter-wrap a[data-filter="${конкретноеЗначение}"]`);
if (element) {
...
const element = [...elements].find(n => n.dataset.filter === конкретноеЗначение);
if (element) {
...
Internal methods and internal slots are identified within this specification using names enclosed in double square brackets...
Within this specification a well-known symbol is referred to by using a notation of the form @@name...
Within this specification a reference such as %name% means the intrinsic object...
let displayMessage = ''; doItems.forEach((item, i) => { displayMessage += ` <li class="do__item"> <input type="checkbox" id="do_${i}" ${item.checked ? 'checked': ' '}> <label for="do_${i}" class="${item.checked ? 'checked' : ' '}">${item.message}</label> <button class="remove" id="do_${i}">Delete</button> </li>`; block.innerHTML = displayMessage; });
const insert = (str, index, ch) =>
str.replace(RegExp(`(?<=.{${index}})`), ch);
// или
const insert = (str, index, ch) =>
str.replace(RegExp(`.{${index}}`), `$&${ch}`);
// или
const insert = (str, index, ch) =>
str.length >= index ? str.slice(0, index) + ch + str.slice(index) : str;
document
.querySelectorAll('селектор элементов внутри слайдов, где должны отображаться их номера')
.forEach((n, i, a) => n.innerText = `${i + 1} / ${a.length}`);
<input type="radio" name="xxx" data-placeholder="hello, world!!">
<input type="radio" name="xxx" data-placeholder="fuck the world">
<input type="radio" name="xxx" data-placeholder="fuck everything">
document.addEventListener('change', ({ target: t }) => {
if (t.matches('input[type="radio"][data-placeholder]')) {
t.closest('form').querySelector('input[type="text"]').placeholder = t.dataset.placeholder;
}
});
$.param($(this).serializeArray().filter(n => +n.value && n.name !== 'mode'))
const count = arr.reduce((acc, n) => (acc[n] = (acc[n] ?? 0) + 1, acc), {});
const newArr = arr.map(n => count[n] > 1 ? newValue : n);
// или
const newArr = arr.map(function(n) {
return this.get(n) ? newValue : n;
}, arr.reduce((acc, n) => acc.set(n, acc.has(n)), new Map));
// или
const newArr = arr.map((n, i, a) => a.indexOf(n) !== a.lastIndexOf(n) ? newValue : n);
arr.forEach(function(n, i, a) {
a[i] = this.get(n) > 1 ? newValue : n;
}, arr.reduce((acc, n) => acc.set(n, -~acc.get(n)), new Map));
// или
const duplicates = arr.reduce((acc, n) => (acc[n] = acc.hasOwnProperty(n), acc), {});
arr.splice(0, arr.length, ...arr.map(n => duplicates[n] ? newValue : n));
// или
Object
.values(arr.reduce((acc, n, i) => ((acc[n] ??= []).push(i), acc), {}))
.forEach(n => n.length > 1 && n.forEach(i => arr[i] = newValue));
$('.payment-innovation .item').css('opacity', 0);
$('.payment-innovation .list-block__head').click(function() {
const $this = $(this);
const $items = $this.closest('.list-block').find('.item');
const visible = $this.toggleClass('visible').hasClass('visible');
const duration = 400;
$items.each((i, n) => $(n)
.delay((visible ? i : $items.length - i - 1) * duration)
.animate({ opacity: +visible }, duration)
);
}).click();