function interval(arr, delay, callback) {
let i = ~-arr.length;
return arr.length
? setInterval(() => callback(arr[i], arr[i = -~i % arr.length]), delay)
: null;
}
// или
function interval(arr, delay, callback) {
let timeoutId = null;
arr.length && (function step(i) {
timeoutId = setTimeout(() => {
callback(arr[i++], arr[i %= arr.length]);
step(i);
}, delay);
})(arr.length - 1);
return () => clearTimeout(timeoutId);
}
interval(
document.querySelectorAll('.banner-block'),
300,
(prev, curr) => {
prev.classList.remove('active');
curr.classList.add('active');
}
);
interval
, для первой версии передавать этот результат в clearInterval
, а для второй вызвать его. $('.num').each(function() {
$({ value: 0 }).animate({ value: +$(this).text() }, {
duration: 1000,
easing: 'linear',
step: val => $(this).text(val.toFixed(2)),
});
});
.item
добавить data-атрибуты, указывающие, выбор какого типа осуществляется с помощью кнопок внутри (only
- выбран может быть только один вариант вообще, one
- выбран может быть только один вариант внутри данного .item
, multiple
- можно выбирать произвольное количество вариантов внутри данного .item
):<div class="item" data-type="only">
<h2>Выбрать все категории</h2>
...
</div>
<div class="item" data-type="one">
<h2>Выбрать пол</h2>
...
</div>
<div class="item" data-type="multiple">
<h2>Выбрать тип одежды</h2>
...
</div>
const containerSelector = '.filter';
const itemSelector = `${containerSelector} .item`;
const baseBtnSelector = 'button';
const btnSelector = `${itemSelector} ${baseBtnSelector}`;
const btnOnlySelector = `${itemSelector}[data-type="only"] ${baseBtnSelector}`;
const activeClass = 'active';
document.addEventListener('click', ({ target: t }) => {
const button = t.closest(btnSelector);
if (button) {
const toggle = n => n.classList.toggle(activeClass, n === button);
const item = button.closest(itemSelector);
const { type } = item.dataset;
item
.closest(containerSelector)
.querySelectorAll(type === 'only' ? btnSelector : btnOnlySelector)
.forEach(toggle);
if (type === 'multiple') {
button.classList.toggle(activeClass);
} else if (type === 'one') {
item.querySelectorAll(btnSelector).forEach(toggle);
}
}
});
function merge(nums1, m, nums2, n) {
for (let i = m + n, i1 = m - 1, i2 = n - 1; i--;) {
nums1[i] = i2 < 0 || nums1[i1] > nums2[i2] ? nums1[i1--] : nums2[i2--];
}
}
function randomCall(items) {
const max = items.reduce((acc, n) => acc + n.ratio, 0);
return function(...args) {
const val = Math.random() * max;
for (let sum = 0, i = 0; i < items.length; i++) {
sum += items[i].ratio;
if (sum > val) {
return items[i].func.apply(this, args);
}
}
};
}
const func = randomCall([
{ func: func1, ratio: 1 },
{ func: func2, ratio: 2 },
{ func: func3, ratio: 3 },
{ func: func4, ratio: 4 },
]);
function find(data, val) {
const values = data instanceof Object ? Object.values(data) : [];
return values.includes(val)
? data
: values.reduce((found, n) => found || find(n, val), null);
}
const obj = find(arrayData, 'myValue');
function find(data, val) {
for (const stack = [ data ]; stack.length;) {
const n = stack.pop();
if (n instanceof Object) {
const values = Object.values(n);
if (values.includes(val)) {
return n;
}
stack.push(...values);
}
}
return null;
}
.item
, а не вложенные в него элементы:.item[data-xxx="1"]::before { background: #444; }
.item[data-xxx="2"]::before { background: #555; }
.item[data-xxx="3"]::before { background: #666; }
.item[data-xxx="4"]::before { background: #777; }
.item[data-xxx="5"]::before { background: #888; }
.item[data-xxx="6"]::before { background: #999; }
.item
не надо:$('#counter').on('input', e => {
$('#results').html('<div class="item"></div>'.repeat(e.target.value));
}).trigger('input');
// или
const results = document.querySelector('#results');
const counter = document.querySelector('#counter');
counter.addEventListener('input', ({ target: { value } }) => {
results.innerHTML = Array(++value).join('<div class="item"></div>');
});
counter.dispatchEvent(new Event('input'));
$('#view').on('click', () => $('.item').attr('data-xxx', () => 1 + Math.random() * 6 | 0));
// или
document.querySelector('#view').addEventListener('click', () => {
document.querySelectorAll('.item').forEach(n => n.dataset.xxx = -~(Math.random() * 6));
});
document.querySelector('table').addEventListener('click', ({ target: t }) => {
const next = t.matches('input[type="button"]') && t.parentNode.nextElementSibling;
const input = next && next.querySelector('input');
input && (input.type = 'text');
});
Object.fromEntries((url.match(/(?<=utm_).+?=[^&]*/g) || []).map(n => n.split('=')))
[...url.matchAll(/utm_([^=]+)=([^&]*)/g)].reduce((acc, [ , k, v ]) => (acc[k] = v, acc), {})
Array
.from(new URL(url).searchParams)
.filter(n => n[0].startsWith('utm_'))
.reduce((acc, n) => ({ ...acc, [n[0].slice(4)]: n[1] }), {})
select.value = '0';
select.selectedIndex = 0;
true
в качестве значения свойства selected тому option'у, на который хотите переключиться:select[0].selected = true;
// или
select.options[0].selected = true;
// или
select.children[0].selected = true;
// или
select.firstElementChild.selected = true;
// или
select.querySelector('[selected]').selected = true;
select.innerHTML += '';
const entries = Object.entries(obj);
const mustBeRemoved = v =>
(v instanceof Object && !Object.keys(v).length) ||
(!v && typeof v !== 'boolean');
const newObj = Object.fromEntries(entries.filter(n => !mustBeRemoved(n[1])));
entries.forEach(n => mustBeRemoved(n[1]) && delete obj[n[0]]);
const box1 = document.querySelector('.box1');
const box2 = document.querySelector('.box2');
box2.firstElementChild.insertAdjacentHTML('afterend', Array
.from(box1.children, ({ innerText: n }) => `<p><a href="#${n}">${n}</a></p>`)
.join('')
);
<div class="wrapper">
<button data-view="horizontal">Горизонтально</button>
<button data-view="vertical">Вертикально</button>
<div class="card-wrapper" data-view="horizontal">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
.card-wrapper {
display: flex;
}
.card-wrapper[data-view="horizontal"] {
flex-direction: row;
}
.card-wrapper[data-view="vertical"] {
flex-direction: column;
}
document.querySelector('.wrapper').addEventListener('click', function(e) {
const view = e.target.dataset.view;
if (view && e.target.tagName === 'BUTTON') {
this.querySelector('.card-wrapper').dataset.view = view;
}
});
<div class="wrapper">
<button data-view="horizontal">Горизонтально</button>
<button data-view="vertical">Вертикально</button>
<div class="card-wrapper active" data-view="horizontal">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
<div class="card-wrapper" data-view="vertical">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
.card-wrapper {
display: none;
}
.card-wrapper.active {
display: flex;
}
.card-wrapper[data-view="horizontal"] {
flex-direction: row;
}
.card-wrapper[data-view="vertical"] {
flex-direction: column;
}
document.querySelector('.wrapper').addEventListener('click', function(e) {
const view = e.target.dataset.view;
if (view && e.target.tagName === 'BUTTON') {
document.querySelectorAll('.card-wrapper').forEach(n => {
n.classList.toggle('active', n.dataset.view === view);
});
}
});
data('.nights')
data('.guests')
$('div > span').click(e => e.stopPropagation());
$('div').click(function(e) {
if ($(e.target).is('span')) {
return;
}
...
});
$("#idModalEditUser").modal('show').find('.modal-body').text($(this).text());
const arr = [ '***', '+++' ];
const obj = {
'!!!': [
{ id: 0, text: 'fjdklsfjklds' },
],
'+++': [
{ id: 3, a: '111', b: '!!!' },
{ id: 9, a: '222', b: '???' },
{ id: 27, a: '333', b: ':::' },
{ id: 81, a: '444', b: '...' },
],
'***': [
{ id: 69, text: 'hello, world!!' },
{ id: 187, text: 'fuck the world' },
{ id: 666, text: 'fuck everything' },
],
};
document.body.insertAdjacentHTML('beforeend', arr.map(n => {
const columns = Object.keys(obj[n][0]);
return `
<h1>${n}</h1>
<table>
<thead>
<tr>${columns.map(n => `
<th>${n}</th>`).join('')}
</tr>
</thead>
<tbody>${obj[n].map(row => `
<tr>${columns.map(col => `
<td>${row[col]}</td>`).join('')}
</tr>`).join('')}
</tbody>
</table>`;
}).join(''));
document.body.append(...arr.flatMap(n => {
const columns = Object.keys(obj[n][0]);
const header = document.createElement('h1');
const table = document.createElement('table');
header.textContent = n;
table.createTHead().insertRow().append(...columns.reduce((acc, col) => (
(acc[acc.length] = document.createElement('th')).textContent = col,
acc
), []));
obj[n].forEach(function(row) {
const tr = this.insertRow();
columns.forEach(col => tr.insertCell().textContent = row[col]);
}, table.createTBody());
return [ header, table ];
}));