Логика такая, при клике на пункт списка, например "About" этот текст оказывался на месте текущего, а текущий в списке.
dropdown-menu-item
, например. И код в обработчик клика:const item = event.target.closest('.dropdown-menu-item');
if (item) {
const btn = item.closest('.dropdown').querySelector('.dropdown-toggle');
[ btn.textContent, item.textContent ] = [ item.textContent, btn.textContent ];
}
JSON.stringify([...this.querySelectorAll('[name]')].map(n => ({
[n.name]: n.type === 'checkbox' ? n.checked : n.value,
})))
const parseDate = str => new Date(str.split('/').reverse().join('-'));
all_orders.sort((a, b) => parseDate(a.order_date) - parseDate(b.order_date));
const sortedOrders = all_orders
.map(n => [ n, parseDate(n.order_date) ])
.sort((a, b) => a[1] - b[1])
.map(n => n[0]);
str.replace(/(?<=.{2}).(?=.{2})/g, '*')
// или
str.replace(/^(.{2})(.+)(.{2})$/, (m, g1, g2, g3) => g1 + '*'.repeat(g2.length) + g3)
// или
Array.from(str, (n, i) => (i < 2 || i > str.length - 3) ? n : '*').join('')
[...Array(12)].map((n, i) => new Date(0, i).toLocaleString('en-US', { month: 'long' }))
Object.entries(arr.reduce((acc, n) => {
const [ k, v ] = Object.entries(n)[0];
(acc[k] = acc[k] || []).push(...v);
return acc;
}, {})).map(n => Object.fromEntries([ n ]))
Пробовал ставить перед скобкой «\» не работает.
const createXML = obj => Object
.entries(obj)
.map(([ k, v ]) => `<ns1:${k}>${v instanceof Object ? createXML(v) : v}</ns1:${k}>`)
.join('');
const createXML = (obj, tabSize = 2, depth = 0) => {
const indent = ' '.repeat(tabSize * depth);
return Object.entries(obj).map(([ k, v ]) =>
indent +
`<ns1:${k}>${
v instanceof Object
? `\n${createXML(v, tabSize, depth + 1)}\n${indent}`
: v
}</ns1:${k}>`
).join('\n');
};
modal.style.display = "none"
делайте modal.remove()
, и всё будет окей. <div id="address-list"></div>
const addressList = document.querySelector('#address-list');
addressList.innerHTML = markersData.map((n, i) => `
<div class="address-list-item">
<span data-index="${i}">${n.name}</span>
</div>
`).join('');
addressList.addEventListener('click', e => {
const marker = markersData[e.target.dataset.index];
if (marker) {
map.setCenter(new google.maps.LatLng(marker.lat, marker.lng));
}
});
document.addEventListener('change', function() {
const cb = [...document.querySelectorAll('input[type="checkbox"]:checked')];
document.querySelector('#sum').value = cb.length * 900;
document.querySelector('#ids').value = cb.map(n => n.id).join(', ');
});
function calcRowAndColumn(coordinates) { let currPosition; if (coordinates > 0 && coordinates < 4) { currPosition = 0; } if (coordinates > 4 && coordinates < 8) { currPosition = 1; } if (coordinates > 8 && coordinates < 12) { currPosition = 2; } if (coordinates > 12 && coordinates < 16) { currPosition = 3; } if (coordinates > 16 && coordinates < 20) { currPosition = 4; } if (coordinates > 20 && coordinates < 24) { currPosition = 5; } if (coordinates > 24 && coordinates < 28) { currPosition = 6; } if (coordinates > 28 && coordinates < 32) { currPosition = 7; } if (coordinates > 32 && coordinates < 36) { currPosition = 8; } if (coordinates > 36 && coordinates < 40) { currPosition = 9; } if (coordinates > 40 && coordinates < 44) { currPosition = 10; } if (coordinates > 44 && coordinates < 48) { currPosition = 11; } if (coordinates > 48 && coordinates < 52) { currPosition = 12; } if (coordinates > 52 && coordinates < 56) { currPosition = 13; } if (coordinates > 56 && coordinates < 60) { currPosition = 14; } if (coordinates > 60 && coordinates < 64) { currPosition = 15; } if (coordinates > 64 && coordinates < 68) { currPosition = 16; } if (coordinates > 68 && coordinates < 72) { currPosition = 17; } if (coordinates > 72 && coordinates < 76) { currPosition = 18; } if (coordinates > 76 && coordinates < 80) { currPosition = 19; } if (coordinates > 80 && coordinates < 84) { currPosition = 20; } if (coordinates > 84 && coordinates < 88) { currPosition = 21; } if (coordinates > 88 && coordinates < 92) { currPosition = 22; } if (coordinates > 92 && coordinates < 96) { currPosition = 23; } if (coordinates > 96 && coordinates < 100) { currPosition = 24; } if (coordinates > 100 && coordinates < 104) { currPosition = 25; } if (coordinates > 104 && coordinates < 108) { currPosition = 26; } if (coordinates > 108 && coordinates < 112) { currPosition = 27; } if (coordinates > 112 && coordinates < 116) { currPosition = 28; } if (coordinates > 116 && coordinates < 120) { currPosition = 29; } if (coordinates > 120 && coordinates < 124) { currPosition = 30; } if (coordinates > 124 && coordinates < 128) { currPosition = 31; } return currPosition; }
const calcRowAndColumn = coord => Math.floor(coord / 4);
if (coordinates > 112 && coordinates < 116) { currPosition = 28; } if (coordinates > 116 && coordinates < 120) { currPosition = 29; }
.div1:hover + .div2,
.div2:hover {
display: block;
}
.show {
display: block;
}
let timeout = null;
function onEnter() {
clearTimeout(timeout);
div2.classList.add('show');
}
function onLeave() {
timeout = setTimeout(() => div2.classList.remove('show'), 300);
}
div1.addEventListener('mouseenter', onEnter);
div2.addEventListener('mouseenter', onEnter);
div1.addEventListener('mouseleave', onLeave);
div2.addEventListener('mouseleave', onLeave);
const getQueryArray = (obj, path = [], result = []) =>
Object.entries(obj).reduce((acc, [ k, v ]) => {
path.push(k);
if (v instanceof Object) {
getQueryArray(v, path, acc);
} else {
acc.push(`${path.map((n, i) => i ? `[${n}]` : n).join('')}=${v}`);
}
path.pop();
return acc;
}, result);
const getQueryString = obj => getQueryArray(obj).join('&');
const getQueryString = (obj, path = '') =>
Object.entries(obj).reduce((acc, [ k, v ]) => (
path && (k = `${path}[${k}]`),
acc + (acc && '&') + (v instanceof Object
? getQueryString(v, k)
: `${k}=${v}`
)
), '');
get
, можно ничем его не заменять. При обработке клика вместо первого попавшегося audio
надо хватать тот, что соответствует нажатой кнопке (это же касается элементов .play
и .pause
, с той лишь разницей, что тут вы хватаете всё, что есть), т.е., который находится в том же .container
. От кликнутого элемента поднимаемся к .container
и ищем внутри него нужные элементы:$(document).on('click', '.play, .pause', function() {
const $this = $(this);
const $container = $this.closest('.container');
const isPlay = $this.hasClass('play');
$container.find('.play').toggleClass('active', isPlay);
$container.find('.pause').toggleClass('active', !isPlay);
$container.find('audio').get(0)[isPlay ? 'play' : 'pause']();
});
document.querySelector('.music-album').addEventListener('click', e => {
const { target: t, currentTarget: ct } = e;
const playButton = ct.querySelector('.play_button');
const stopButton = ct.querySelector('.stop_button');
const state =
playButton.contains(t) ? true :
stopButton.contains(t) ? false :
null;
if (state !== null) {
ct.querySelector('audio')[state ? 'play' : 'pause']();
playButton.style.display = state ? 'none' : 'block';
stopButton.style.display = state ? 'block' : 'none';
}
});
const sum = data =>
(data instanceof Array ? data : [ data ]).reduce((acc, n) => {
return acc + n.value + sum(n.children || []);
}, 0);
const valueSum = sum(valueList);
function sum(data) {
let result = 0;
for (const stack = [].concat(data); stack.length;) {
const { value, children: c } = stack.pop();
stack.push(...(Array.isArray(c) ? c : []));
result += value;
}
return result;
}
$('.wr').on('input', 'input', function() {
const
$this = $(this),
val = $this.val(),
$link = $this.closest('.item').find('.link-a');
$link.toggleClass('success', /* здесь проверяете, что val какой надо */);
});
.hidden {
display: none;
}
const searchInput = document.querySelector('#txtsearchinput');
const clearButton = document.querySelector('#deltxtinput');
clearButton.addEventListener('click', function() {
searchInput.value = '';
searchInput.dispatchEvent(new Event('input'));
});
searchInput.addEventListener('input', function() {
clearButton.classList.toggle('hidden', !this.value);
});