Как реализовать на нативном js функционал из jquery?

Question

[Дмитрий Марков]

Как такое сделать без jquery? Проблема в .not() не могу сообразить как его написать )

$(buttons).each((index, element) => {
    $(element).on('click', event => {
        $(element).addClass('active');
        // именно такой порядок нужен
        $(buttons).not(element).removeClass('active');
    })
})

Answer 1

[Дмитрий Марков]

Вообщем сделал сам, через костыль с if и повторным добавлением класса.

dropdown(event) {
    event.preventDefault();
    let target = event.currentTarget;

    this.dropdownCloseOther(target.parentNode);

    let dropdown = target.parentNode.querySelector('.custom-select-dropdown');
    dropdown.classList.toggle('active');
}
dropdownCloseOther(not) {
    let isActive = false;
    if( not.querySelector('.custom-select-dropdown').classList.contains('active') ) isActive = true;

    let dropdowns = document.querySelectorAll('.custom-select-dropdown.active');
    dropdowns.forEach(dropdown => {
        dropdown.classList.remove('active');
    })

    if( isActive ) not.querySelector('.custom-select-dropdown').classList.add('active');
}

Answer 2

[0xD34F]

youmightnotneedjquery.com

Comments

[Дмитрий Марков]

Спасибо конечно за ссылочку) но я там был. Там этого нету

[0xD34F]

En-Tilza, а подумать, хоть немного? Вот вы видите конструкции на jquery, а вот рядом - их аналоги без использования библиотеки. Что, ничего в голове не шевельнулось? Типа, а вдруг тут не всё перечислено, если погуглить, то получится найти ещё что-то. Нет? Это печально.

[Дмитрий Марков]

0xD34F, А вы умеете думать? Что это за сайт? Зачем сюда люди заходят?
Если так не хочется отвечать на вопросы , зачем вы это делаете?
Не заставляйте себя!
Мне даже вас жалко...

Answer 3

[Александр]

Как вариант

if (!('addEventListener' in NodeList)) {
	NodeList.prototype.addEventListener = function (...args) {
		for (const node of this.values()) {
			node.addEventListener(...args);
		}
	}
}

if (!('removeEventListener' in NodeList)) {
	NodeList.prototype.removeEventListener = function (...args) {
		for (const node of this.values()) {
			node.removeEventListener(...args);
		}
	}
}

const elements = document.querySelectorAll('some_selector');
elements.addEventListener('event_type', ...);

Answer 4

[profesor08]

Получаешь массив элементов и работай с ним, нужному добавь класс, у остальных убери. Придется освоить работу с массивами, иначе никак.

Comments

[Дмитрий Марков]

...