function openCity(e, city) {
document.querySelectorAll('.tablink').forEach(n => {
n.classList.toggle('active', city === 'All' || n === e.target);
});
document.querySelectorAll('.tabcontent').forEach(n => {
n.style.display = city === 'All' || n.id === city ? 'block' : 'none';
});
}
document.querySelectorAll('.number').forEach(number => {
const top = number.getBoundingClientRect().top;
window.addEventListener('scroll', function onScroll() {
if (window.pageYOffset > top - window.innerHeight / 2) {
this.removeEventListener('scroll', onScroll);
let start = +number.innerHTML;
const interval = setInterval(function() {
number.innerHTML = ++start;
if (start >= number.dataset.max) {
clearInterval(interval);
}
}, 5);
}
});
});
$(document).wheel(
var item = $('#time'); if (e.deltaY > 0) item.scrollLeft += 100;
$(document).on('wheel', function(e) {
$('#time')[0].scrollLeft += e.originalEvent.deltaY > 0 ? 100 : -100;
// или
$('#time').get(0).scrollLeft += [ -100, 100 ][+(e.originalEvent.deltaY > 0)];
// или
$('#time').prop('scrollLeft', (i, val) => val + 100 * Math.sign(e.originalEvent.deltaY));
});
typeof
:const strings = arr.filter(n => typeof n === 'string');
const numbers = arr.filter(n => typeof n === 'number');
const booleans = arr.filter(n => typeof n === 'boolean');
const strings = arr.filter(n => n === `${n}`);
const numbers = arr.filter(n => n === +n); // в отличие от typeof, отбрасывает NaN
const booleans = arr.filter(n => n === !!n);
const groupedByType = arr.reduce((acc, n) => {
const type = n == null ? `${n}` : n.constructor.name.toLowerCase();
(acc[type] = acc[type] || []).push(n);
return acc;
}, {});
const strings = groupedByType.string;
const containerSelector = 'ul';
const itemSelector = 'li';
const activeClass = 'active';
const $containers = $(containerSelector).on('click', itemSelector, function(e) {
const index = $(itemSelector, e.delegateTarget).index(this);
$containers.find(`${itemSelector}.${activeClass}`).removeClass(activeClass);
$containers.find(`${itemSelector}:eq(${index})`).addClass(activeClass);
});
const containers = document.querySelectorAll(containerSelector);
containers.forEach(n => n.addEventListener('click', onClick));
function onClick(e) {
const item = e.target.closest(itemSelector);
if (item) {
const index = [...this.querySelectorAll(itemSelector)].indexOf(item);
containers.forEach(container => {
container.querySelectorAll(itemSelector).forEach((n, i) => {
n.classList.toggle(activeClass, i === index);
})
});
}
}
const td = [...document.querySelectorAll('table td')];
const first = td[0].offsetLeft;
const last = Math.max(...td.map(n => n.offsetLeft + n.offsetWidth));
td.forEach(n => (
(n.offsetLeft === first) && n.classList.add('first'),
(n.offsetLeft + n.offsetWidth === last) && n.classList.add('last')
));
const newArr = arr.reduce((acc, n) => (
acc[n.month - 1] = n.sum,
acc
), Array(12).fill(''));
const newArr = Array.from({ length: 12 }, function(_, i) {
return this[-~i] || '';
}, Object.fromEntries(arr.map(n => [ n.month, n.sum ])));
const newArr = [];
for (let i = 0, j = 0; i < 12; i++) {
newArr.push((arr[j] || {}).month === i + 1 ? arr[j++].sum : '');
}
!==
) и закрыт, т.е., открываете все, кроме закрываемого.document.addEventListener('click', e => {
const t = e.target;
const heading = t.closest('.panel-heading');
const nextStep = t.closest('.construct-btn');
const collapse =
heading ? heading.nextElementSibling :
nextStep ? t.closest('.panel').nextElementSibling.querySelector('.panel-collapse') :
null;
if (collapse) {
e.preventDefault();
t.closest('.panel-group').querySelectorAll('.panel-collapse').forEach(n => {
n.classList[n === collapse ? 'toggle' : 'remove']('in');
});
}
});
function addClickListeners(buttonsSelector, dialogSelector) {
const buttons = document.querySelectorAll(buttonsSelector);
const dialog = document.querySelector(dialogSelector);
buttons.forEach(n => n.addEventListener('click', e => {
e.preventDefault();
dialog.style.display = 'block';
}));
dialog.addEventListener('click', ({ target }) => {
if (target.classList.contains('popup-close')) {
document.getElementById('name_1').setAttribute('disabled', true);
document.getElementById('phone_1').setAttribute('disabled', true);
dialog.style.display = 'none';
} else {
if (!target.closest('.popup-content')) {
dialog.style.display = 'none';
}
}
});
}
addClickListeners('header .contacts a', '.popup-call');
addClickListeners('.sentence-btn', '.popup-discount');
addClickListeners('.check-btn', '.popup-check');
document.addEventListener('click', function(e) {
const heading = e.target.closest('.panel-heading');
if (heading) {
e.preventDefault();
heading.closest('.panel-group').querySelectorAll('.panel-collapse').forEach(n => {
n.classList[n === heading.nextElementSibling ? 'toggle' : 'remove']('in');
});
}
});
$('.all-blocks.color-blocks .block').attr('id', function(i, id) {
return $(this).hasClass(id) ? `${id}_2` : id;
});
document.querySelectorAll('.all-blocks.color-blocks .block').forEach(n => {
n.id += n.classList.contains(n.id) ? '_2' : '';
});
.active .block {
border: 1px solid red;
color: red;
}
.active .under-box-text {
display: none;
}
.active .invisible {
display: block;
}
const itemSelector = '.wrapper';
const buttonSelector = '.block, .link';
const activeClass = 'active';
$(itemSelector).on('click', buttonSelector, e => {
$(e.delegateTarget).toggleClass(activeClass);
});
// или
document.querySelectorAll(itemSelector).forEach(function(n) {
n.querySelectorAll(buttonSelector).forEach(m => m.addEventListener('click', this));
}, e => e.currentTarget.closest(itemSelector).classList.toggle(activeClass));
// или
document.querySelectorAll(itemSelector).forEach(n => {
n.addEventListener('click', onClick);
});
function onClick(e) {
const button = e.target.closest(buttonSelector);
if (button) {
this.classList.toggle(activeClass);
}
}
// или
document.addEventListener('click', e => {
const button = e.target.closest(buttonSelector);
const item = button && button.closest(itemSelector);
item && item.classList.toggle(activeClass);
});
запрос_1()
.then(результат_1 => Promise
.all(результат_1.map(запрос_2))
.then(результат_2 => результат_1.map((значение_1, i) => ({
значение_1: значение_1,
значение_2: результат_2[i],
})))
)
.then(console.log)
const getDayName = (number, lang) => ({
en: [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ],
ru: [ 'Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота' ],
})[lang][number % 7];
console.log(getDayName(5, 'en')) // Friday
console.log(getDayName(7, 'ru')) // Воскресенье
const getDayName = (number, lang) =>
new Date(2001, 0, number % 7).toLocaleString(lang, { weekday: 'long' });
// можно посмотреть количество ключей
const isEmpty = x => !Object.keys(x || {}).length;
// или перебирать свойства, пока не встретится собственное
function isEmpty(x) {
for (const k in x) if (x.hasOwnProperty(k)) {
return false;
}
return true;
}
isEmpty() // true
isEmpty(null) // true
isEmpty(666) // true
isEmpty('') // true
isEmpty([]) // true
isEmpty({}) // true
isEmpty([ 187 ]) // false
isEmpty({ xxx: 69 }) // false
isEmpty('hello, world!!') // false
await Promise.all([ one(), query().then(commit) ])
await Promise.all([ one(), query().then(r => (commit(), r)) ])