const obj = Object.assign({}, ...arr.map((n, i) => ({ [n]: arr2[i] })));
// или
const obj = arr.reduce((acc, n, i) => ({ ...acc, [n]: arr2[i] }), {});
const combine = (keys, values) =>
keys.reduce((acc, n, i) => (acc[n] = values[i], acc), {});
const obj = combine(arr, arr2);
$(document).on('click', '.ev-title', function() {
$(this).closest('.wrapper').find('.dop-descr').toggleClass('visible');
});
.dop-descr
, а у их самых дальних не общих предков, которыми, насколько я понял, являются .wrapper
. Если вдруг решите дополнительно стилизовать внутри .wrapper
с кликнутым .ev-title
ещё какие-то элементы, то не придётся переписывать js-код. Конечно, css придётся немного переписать, вместо .dop-descr.класс
стилизовать надо будет .класс .dop-descr
.const containerSelector = '.wrapper';
const buttonSelector = '.ev-title';
const activeClass = 'active';
$(containerSelector).on('click', buttonSelector, e => {
$(e.delegateTarget).toggleClass(activeClass);
});
document
.querySelectorAll(`${containerSelector} ${buttonSelector}`)
.forEach(n => n.addEventListener('click', onClick));
function onClick() {
this.closest(containerSelector).classList.toggle(activeClass);
}
больше не появлялось пока он не почистит куки
export default { ...test1, ...test2 };
// или
export default Object.assign({}, test1, test2);
// или
export default ((merged, ...objs) => {
for (const n of objs) for (const k in n) {
if (n.hasOwnProperty(k) && !merged.hasOwnProperty(k)) {
merged[k] = n[k];
}
}
return merged;
})({}, test2, test1);
const result = Object
.entries(Object.assign({}, ...arr1, ...arr2))
.map(n => ({ [n[0]]: n[1] }));
const union = (key, ...arrs) =>
Object.values([].concat(...arrs).reduce((acc, n) => (acc[key(n)] = n, acc), {}));
const result = union(el => Object.keys(el)[0], arr1, arr2);
const result = _.unionBy(arr1, arr2, el => _.keys(el)[0]);
$(document).click(function(e) {
const $target = $(e.target);
let $itemsToClose = $('.top-menu__item');
if ($target.hasClass('top-menu__link')) {
const $item = $target.closest('li');
$item.toggleClass('top-menu__item_open').children('ul').slideToggle();
$itemsToClose = $itemsToClose.not($item);
}
$itemsToClose
.removeClass('top-menu__item_open')
.children('ul')
.slideUp();
});
<div class="slide" data-slide="1">1</div>
<div class="slide" data-slide="2">1+1</div>
<div class="slide" data-slide="3">3.0001</div>
<div>
<span class="step" data-slide="1"></span>
<span class="step" data-slide="2"></span>
<span class="step" data-slide="3"></span>
</div>
data-slide
такое же, как у кнопки:$(document).on('click', '.step', function() {
$('.step.active, .slide.active').removeClass('active');
$(this).addClass('active');
$(`.slide[data-slide="${this.dataset.slide}"]`).addClass('active');
});
// по умолчанию сделаем активным первый слайд
$('.step').eq(0).click();
Пробовал приспособить setTimeout, пробовал им вызывать функцию, а к функции присвоить название.. Но не сработало..
Что я делаю не так?
#red {
transition: opacity 0.2s;
}
#red.hidden {
opacity: 0.5;
}
$('#red').click(e => $(e.target).toggleClass('hidden'));
// или
document.querySelector('#red').addEventListener('click', e => {
e.target.classList.toggle('hidden');
});
const options = [ 'first', 'second', 'third', 'fourth' ];
const $table = $('table');
$('button').click(function() {
$table.append(`
<tr>
<td>
<select>
<option disabled selected>-</option>
${options.map(n => `<option>${n}</option>`).join('')}
</select>
</td>
<td>
<button class="del">del</button>
</td>
</tr>
`);
updateDisabled();
});
$table
.change(updateDisabled)
.on('click', '.del', function() {
$(this).closest('tr').remove();
updateDisabled();
});
function updateDisabled() {
const $select = $table.find('select');
const selectedOptions = $select.get().map(n => n.value);
$select.find('option').prop('disabled', function() {
return selectedOptions.includes(this.value);
});
}
300
---> '300px'
.#xxxten.big {
width: 300px;
}
document.querySelector('#xxxten').addEventListener('click', function() {
this.classList.toggle('big');
});
var result = {};
- и всё будет нормально. document.querySelector('button').addEventListener('click', function() {
const bar = document.querySelector('#progress');
const label = document.querySelector('#procent');
let width = 0;
const interval = setInterval(function() {
if (++width >= 100) {
clearInterval(interval);
}
bar.style.width = label.innerText = `${width}%`;
}, 10);
});
document.querySelectorAll('.news-item_title').forEach(n => {
n.querySelector('.tit_link').textContent = '[Подробнее]';
n.closest('.news-block_item').append(n);
});
for...of
можно без проблем комбинировать с querySelectorAll
, то чтобы тут использовать forEach
, придётся коду получения элементов добавить обёртку - [...document.getElementsByClassName('...')]
):for (const n of document.getElementsByClassName('tit_link')) {
n.innerText = '[Подробнее]';
n.parentNode.parentNode.appendChild(n.parentNode);
}
const items = document.querySelector('.news-block_wrap').children;
for (let i = 0; i < items.length; i++) {
items[i].children[1].children[0].innerHTML = '[Подробнее]';
items[i].insertAdjacentElement('beforeend', items[i].children[1]);
}
function updateSum() {
const sum = $('.order-table .number').get().reduce((acc, n) => {
const price = +$(n).prev().text().replace(',', '.');
const count = +$('input', n).val();
return acc + price * count;
}, 0);
$('.order-end-form input[type="text"]').val(sum.toFixed(2));
}
$('.order-table')
.on('click', '.plus, .minus', function() {
const change = $(this).hasClass('plus') ? 1 : -1;
$(this).siblings('input').val((i, val) => Math.max(0, +val + change));
updateSum();
})
.on('input', '.number input', function() {
$(this).val((i, val) => Math.max(0, val | 0));
updateSum();
});