Могу ли я получить флажки по идентификатору и переключать классы без повторяющихся классов и функций?
Я переключаю классы в таблице, чтобы скрыть определенные столбцы на основе флажков, выбранных пользователем над таблицей. Флажки имеют идентификаторы «product_1», «product_2» и т. д.
В таблице 4 столбца, поэтому я сделал 4 функции для переключения:
const toggleFirst = document.getElementById('product_1').addEventListener('click', () => {
document.querySelector('#compare-table').classList.toggle('tb-compare-hide-1');
});
const toggleSecond = document.getElementById('product_2').addEventListener('click', () => {
document.querySelector('#compare-table').classList.toggle('tb-compare-hide-2');
});
const toggleThird = document.getElementById('product_3').addEventListener('click', () => {
document.querySelector('#compare-table').classList.toggle('tb-compare-hide-3');
});
const toggleFourth = document.getElementById('product_4').addEventListener('click', () => {
document.querySelector('#compare-table').classList.toggle('tb-compare-hide-4');
});
Классы, которые переключаются, затем управляют отображением/скрытием.
У меня это работает, но у меня есть 4 класса CSS и 4 функции JS, которые в основном делают одно и то же, но с другим флажком, относящимся к другому классу.
Могу ли я достичь этого с меньшим количеством повторяющихся классов и функций?
Оберните флажки в родительский контейнер. Поместите прослушиватель в родителя, затем используйте делегирование событий, чтобы запросить, что было нажато. Тогда вам нужен только один слушатель. Для получения дополнительной информации смотрите здесь
Я бы использовал атрибут данных для каждой кнопки, чтобы определить, какой класс «итератор» переключать, а не жестко кодировать 1-4.
Я голосую за закрытие этого вопроса, потому что он основан на мнении
Какой у вас HTML? Нам нужно достаточно кода, чтобы воспроизвести вашу проблему, и ваша проблема заключается не только в повторяющемся JavaScript. См. руководство «минимальный воспроизводимый пример».
Я считаю, что я включил достаточно кода и контекста для решения проблемы. Полный HTML не требуется, потому что контекст можно понять из JS и письменного описания. Посмотрите другие ответы, они предлагают элегантные решения.
Кроме того, я не уверен, почему это должно быть закрыто, поскольку оно основано на мнении. Это относится почти ко всем вопросам на этом форуме. Согласно ответам, которые я получил здесь, есть объективно более элегантные решения!
«Я считаю, что включил достаточно кода и контекста» — и все же ожидания и требования сайта расходятся с вашей самооценкой. Цель сайта не в том, чтобы помочь вам, а в том, чтобы предоставить полезные ответы, которые могут помочь вам и будущим посетителям, у которых, скорее всего, будет другой HTML, научиться использовать и применять код в своей ситуации. С кодом, который воспроизводит вашу проблему, мы можем продемонстрировать вам и другим, как можно реализовать решение.
Я не согласен с вашей интерпретацией правил сайта. Я дал достаточно контекста в коде, а также свою запись. Я держал это предельно ясно. Это обеспечивает контекст, который показывает всем, кто видит этот вопрос, о чем он. Его можно применить к любому классу, переключающему любой HTML. Вопрос был о том, как избежать повторения JS в пользу более элегантного решения с меньшим количеством строк:
«Я переключаю классы в таблице, чтобы скрыть определенные столбцы на основе флажков, выбранных пользователем над таблицей. Флажки имеют идентификаторы «product_1», «product_2» и т. д.».
![Интервьюер: Почему '[] instanceof Object' возвращает "true"?](https://cdn-images-1.medium.com/max/120/0*3Q2LAQJh9HQrdTPK)
Ответы 2
Вы можете удалить идентификатор из флажков и вместо этого использовать классы. Чтобы сопоставить флажки со столбцом, вы можете использовать атрибут data.
<input type = "checkbox" class = "product" data-column-number = "1">
<input type = "checkbox" class = "product" data-column-number = "2">
<input type = "checkbox" class = "product" data-column-number = "3">
<input type = "checkbox" class = "product" data-column-number = "4">
const elementCompareTable = document.querySelector('#compare-table');
document.querySelector('.product').addEventListener('click', (event) => {
const numberTarget = event.target.dataset.columnNumber;
elementCompareTable.classList.toggle(`tb-compare-hide-${numberTarget}`);
});
Вы должны проверить существование элемента, прежде чем пытаться его использовать.
const compareTable = document.querySelector('#compare-table');
let arr = [], el;
const foo = (el, i) => {
if (el) {
el.addEventListener("click", () => {
compareTable.classList.toggle(`tb-compare-hide-${i}`);
})
arr.push(el);
}
}
if (compareTable) {
for (let i=1; i<5; i++) {
el = document.getElementById(`product_${i}`);
foo(el, i);
}
}
// you can then use the array indexes to reference the elements
Это отличный ответ, спасибо! Мне не нужно проверять, существует ли элемент, поскольку он находится в магазине Shopify, а шаблоны Liquid означают, что таблица должна существовать, чтобы флажки существовали (они формируются из одного и того же выбора продукта). Таким образом, пользователь не может установить флажок, и таблица не будет видна. Однако, вероятно, стоит добавить в любом случае!
Флажки завернуты в другой элемент? Что такое базовый HTML?