.faq__answer
не растягивал родительский элемент и, соответственно, не перемещал лежащие ниже .faq__question
, надо задать ему position: absolute
. И ещё z-index
побольше, чем у .faq__quest
, чтобы не прятался за ними.visibility
- так, чтобы элемент, будучи скрытым, продолжал занимать отведённое ему место.function diff(data1, data2, key = n => n) {
const getKey = key instanceof Function ? key : n => n[key];
const keys = new Set(Array.from(data2, getKey));
const result = [];
for (const n of data1) {
if (!keys.has(getKey(n))) {
result.push(n);
}
}
return result;
}
// ваш случай
const result = diff(arr1, arr2, 'id');
// есть и другие варианты использования
diff(Array(10).keys(), Array(7).keys()) // [ 7, 8, 9 ]
diff('ABCDE', 'ace', n => n.toLowerCase()) // [ 'B', 'D' ]
function onChange() {
document.querySelector('селектор элемента для вывода результата проверки').innerText = [
// здесь массив селекторов вида
// input[имя_атрибута1="значение1"][имя_атрибута2="значение2"]:checked
].every(n => document.querySelector(n))
? 'какой-то текст'
: 'какой-то другой текст';
}
onChange();
document.addEventListener('change', e => {
if (e.target.matches('input[type="radio"]')) {
onChange();
}
});
const priceObj = Object.fromEntries(price.map((n, i) => [ `ad${i}`, n.ad ]));
const priceObj = price
.map(Object.entries)
.reduce((acc, [[ k, v ]], i) => (acc[k + i] = v, acc), {});
const priceObj = {};
for (const [ i, n ] of price.entries()) {
for (const k in n) {
priceObj[k.concat(i)] = n[k];
break;
}
}
Object.entries(str.split('').reduce((acc, n) => (acc[n] = (acc[n] ?? 0) + 1, acc), {}))
[...[...str].reduce((acc, n) => acc.set(n, -~acc.get(n)), new Map)]
Object.values(str).sort().join('').match(/(.)\1*/g)?.map(n => [ n[0], n.length ]) ?? []
Array.from(new Set(str), n => [ n, str.split(n).length - 1 ])
const result = Object.values(runs.reduce(
(acc, n) => (acc[n.projectId]?.description.push(n), acc),
Object.fromEntries(projects.map(n => [ n.id, { ...n, description: [] } ]))
));
const result = projects.map(function(n) {
return {
...n,
description: this[n.id] ?? [],
};
}, runs.reduce((acc, n) => ((acc[n.projectId] = acc[n.projectId] ?? []).push(n), acc), {}));
const result = projects.map(n => ({
...n,
description: runs.filter(m => m.projectId === n.id),
}));
users.sort((a, b) => (a.age ?? Infinity) - (b.age ?? Infinity));
const sortedUsers = Object
.values(users.reduce((acc, n) => ((acc[n.age] = acc[n.age] ?? []).push(n), acc), {}))
.flat();
// или
const sorted = (arr, key) => arr
.map(n => [ n, key(n) ])
.sort((a, b) => a[1] - b[1])
.map(n => n[0]);
const sortedUsers = sorted(users, n => n.age ?? Infinity);
<select id="city"></select>
<select id="warehouse"></select>
const citySelect = document.querySelector('#city');
const warehouseSelect = document.querySelector('#warehouse');
citySelect.addEventListener('change', function() {
updateSelectOptions(warehouseSelect, {
calledMethod: 'getWarehouses',
methodProperties: {
CityName: this.value,
},
});
});
updateSelectOptions(citySelect, {
calledMethod: 'getCities',
methodProperties: {
FindByString: '',
},
});
function updateSelectOptions(selectEl, queryData) {
fetch('https://api.novaposhta.ua/v2.0/json/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
modelName: 'Address',
apiKey: '',
...queryData,
}),
})
.then(r => r.json())
.then(r => selectEl.innerHTML = r.data
.map(n => `<option>${n.Description}</option>`)
.join('')
);
}
const includes = (a, b) => Object.entries(b).every(([ k, v ]) => Object.is(v, a[k]));
const check = (a, b) => Object.values(a).some(n => includes(n, b));
const result = check(parent, { a: '1', b: '1' });
winPositions.some(n => n.every(m => xPositions.includes(m)))
const wrapper = document.querySelector('.block');
const blockSelector = '.block_one';
const activeClass = 'active';
wrapper.addEventListener('mouseover', onHover);
wrapper.addEventListener('mouseout', onHover);
function onHover({ type, target }) {
const block = type === 'mouseover' && target.closest(blockSelector);
this.querySelectorAll(blockSelector).forEach(n => {
n.classList.toggle(activeClass, !!block && n !== block);
});
}
.block:has(.block_one:hover) .block_one:not(:hover) {
/* сюда переносим стили того класса, который через js добавлялся */
}
document.querySelectorAll('.number').forEach(n => {
n.innerText = n.innerText.replace(/\d+/g, m => (+m).toLocaleString());
});
for (const n of document.getElementsByClassName('number')) {
n.textContent = n.textContent.replace(/\d(?=(\d{3})+(\D|$))/g, '$& ');
}
fetch('https://api.novaposhta.ua/v2.0/json/', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
modelName: 'Address',
calledMethod: 'getWarehouses',
methodProperties: {
CityName: document.querySelector('.myCityName').textContent,
},
apiKey: '',
}),
})
.then(r => r.json())
.then(r => {
document.querySelector('.mySelect').innerHTML = r.data
.map(n => `<option>${n.Description}</option>`)
.join('');
});
setInterval(tesla.moveRight,30)
setInterval(tesla.moveRight.bind(tesla), 30)
setInterval(() => tesla.moveRight(), 30)
class Car {
...
moveRight = () => {
...
}
}