.ranging {
display: none;
}
.ranging.opened {
display: block;
}const buttonSelector = '.selector';
const contentSelector = '.ranging';
const activeClass = 'opened';
const toggleContent = (contents, index) =>
contents.forEach((n, i) => n.classList.toggle(activeClass, i === index));
// делегирование, назначаем обработчик клика один раз для всех кнопок
// наверное, у них есть какой-то общий предок, тогда вместо документа
// вешать обработчик следует на него:
// document.querySelector('селектор_контейнера_с_кнопками').addEventListener(...
document.addEventListener('click', e => {
const button = e.target.closest(buttonSelector);
if (button) {
const buttons = document.querySelectorAll(buttonSelector);
const index = Array.prototype.indexOf.call(buttons, button);
toggleContent(document.querySelectorAll(contentSelector), index);
}
});
// или, назначаем обработчик клика индивидуально каждой кнопке
const onClick = function(e) {
toggleContent(this, +e.currentTarget.dataset.index);
}.bind(document.querySelectorAll(contentSelector));
document.querySelectorAll(buttonSelector).forEach((n, i) => {
n.dataset.index = i;
n.addEventListener('click', onClick);
});.tab-content__item {
display: none;
}
.tab-content__item.active {
display: list-item;
}
.tab-header__item.active {
color: red;
}const headerSelector = '.tab-header__item';
const contentSelector = '.tab-content__item';
const activeClass = 'active';
// делегирование, обработчик клика добавляется один раз для всех хедеров;
// контент, соответствующий нажатому хедеру, определяем через равенство data-атрибутов
document.addEventListener('click', e => {
const header = e.target.closest(headerSelector);
if (header) {
const { tab } = header.dataset;
const toggle = n => n.classList[n.dataset.tab === tab ? 'toggle' : 'remove'](activeClass);
document.querySelectorAll(headerSelector).forEach(toggle);
document.querySelectorAll(contentSelector).forEach(toggle);
}
});
// или, обработчик клика добавляется каждому хедеру индивидуально;
// контент, соответствующий нажатому хедеру, определяем по равенству индексов
const headers = document.querySelectorAll(headerSelector);
const contents = document.querySelectorAll(contentSelector);
headers.forEach(n => n.addEventListener('click', onClick));
function onClick() {
const index = Array.prototype.indexOf.call(headers, this);
const toggle = (n, i) => n.classList[i === index ? 'toggle' : 'remove'](activeClass);
headers.forEach(toggle);
contents.forEach(toggle);
}i * 4000 на (i * 2 + 1) * 1000 - чтобы таймауты не совпадали
<input id="min" type="number" value="25"> -
<input id="max" type="number" value="75">
<div id="range"></div>const values = {
min: 0,
max: 100,
};
const range = $('#range').ionRangeSlider({
type: 'double',
grid: true,
...values,
onChange(e) {
$('#min').val(e.from);
$('#max').val(e.to);
},
}).data('ionRangeSlider');
$('#min, #max').attr(values).on('input', function() {
const v = [ $('#min').val(), $('#max').val() ]
.sort((a, b) => a - b)
.map(n => Math.max(values.min, Math.min(values.max, +n)));
$('#min').val(v[0]);
$('#max').val(v[1]);
range.update({
from: v[0],
to: v[1],
});
}).trigger('input');<input id="min" type="number" value="25"> -
<input id="max" type="number" value="75">
<div id="range"></div>const values = {
min: 0,
max: 100,
};
$('#range').slider({
range: true,
...values,
slide(e, ui) {
$('#min').val(ui.values[0]);
$('#max').val(ui.values[1]);
},
});
$('#min, #max').attr(values).on('input', function() {
const v = [ $('#min').val(), $('#max').val() ]
.sort((a, b) => a - b)
.map(n => Math.max(values.min, Math.min(values.max, +n)));
$('#min').val(v[0]);
$('#max').val(v[1]);
$('#range').slider('values', v);
}).trigger('input');const reg = new RegExp(`(.+).{${symbolsForHide}}$`);
$('.phone_number')
.attr('data-phone', function() {
return $(this).text()
})
.text((i, text) => text.replace(reg , '$1...'));const
$this = $(this),
$phone = $this.siblings('.phone_number'),
phone = $phone.data('phone');
$phone.text(phone).attr('href', `tel: ${phone}`);
$this.remove();const key = 'prop';
const val = 1;const result = array.flatMap(n => n.filter(m => m[key] === val));
// или
const result = array.reduce((acc, n) => (
n.forEach(m => m[key] === val && acc.push(m)),
acc
), []);
// или
const result = [];
for (const n of [].concat(...array)) {
if (n[key] === val) {
result[result.length] = n;
}
}[...new Set(array.flatMap(n => n.columns).map(n => n.type).filter(n => !defaultTypes.includes(n)))]const group = (arr, key) =>
arr.reduce((acc, n) => {
const k = n[key];
(acc[k] = acc[k] || []).push(n);
return acc;
}, {});
const result = Object.values(group(array, 'prop'));function group(data, key, val = n => n) {
const getKey = key instanceof Function ? key : n => n[key];
const getVal = val instanceof Function ? val : n => n[val];
const grouped = {};
for (const n of data) {
(grouped[getKey(n)] ??= []).push(getVal(n));
}
return grouped;
}const groupedBySign = group([ 0, 1, 2, 3, -10, -20, -30, 0 ], Math.sign);const groupedByParity = group(Array(10).keys(), n => [ 'чётные', 'нечётные' ][n & 1]);const chars = group(
'ABC123?!+',
n =>
n.toLowerCase() !== n.toUpperCase() ? 'буква' :
Number.isInteger(+n) ? 'цифра' :
'другое'
);<input name="xxx" value="69">
<input name="xxx" value="187">
<input name="xxx" value="666">
<input name="yyy" value="0">const values = group(document.querySelectorAll('input'), 'name', 'value');const result = Object.values(Object.groupBy(array, n => n.prop));<div class="block">hello, world!!</div>
<div class="block">fuck the world</div>
<div class="block">fuck everything</div>
<button>click me</button>.block {
display: none;
}const $btn = $('button').click(function() {
$btn.hide();
$('.block').get().reduceRight((onComplete, el) => {
return () => $(el).fadeIn(300).delay(1000).fadeOut(300, onComplete);
}, () => $btn.show())();
});Проблема в том, что код <...> не удаляет класс
.js-contacts-form добавляет класс обратно. Останавливайте всплытие в обработчике клика по .detail-work__close; или проверяйте перед добавлением класса, где был клик и не добавляйте класс, если... ну, думаю понятно.
выполняются одновременно
new Promise, чтобы получить желаемую асинхронность. Проведите небольшой эксперимент - откройте консоль, выполнитеconsole.log('щас будем создавать промис');
new Promise(r => {
console.log('создаём промис');
setTimeout(() => {
console.log('так, сейчас дёрнем резолв');
r();
console.log('резолв дёрнули');
});
}).then(() => console.log('зарезолвились, наконец-то'));
console.log('промис создан');const $block = $('.picture__text');
const text = $block.text();
const itemSelector = '.pictures__another';$(document).on('mouseover mouseout', itemSelector, function(e) {
$block.text(e.type === 'mouseout' ? text : $(this).text());
});
// или
$(itemSelector).hover(
e => $block.text($(e.currentTarget).text()),
() => $block.text(text)
);Скорее всего я где-то не обнулил интервал или таймаут.
document.addEventListener('focus', function(e) {
if (e.target.tagName === 'INPUT') {
// здесь ваш код
}
}, true);