Могу ли я получить флажки по идентификатору и переключать классы без повторяющихся классов и функций?

Я переключаю классы в таблице, чтобы скрыть определенные столбцы на основе флажков, выбранных пользователем над таблицей. Флажки имеют идентификаторы «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, которые в основном делают одно и то же, но с другим флажком, относящимся к другому классу.

Могу ли я достичь этого с меньшим количеством повторяющихся классов и функций?

Флажки завернуты в другой элемент? Что такое базовый HTML?

epascarello 13.02.2023 18:25

Оберните флажки в родительский контейнер. Поместите прослушиватель в родителя, затем используйте делегирование событий, чтобы запросить, что было нажато. Тогда вам нужен только один слушатель. Для получения дополнительной информации смотрите здесь

Adam 13.02.2023 18:25

Я бы использовал атрибут данных для каждой кнопки, чтобы определить, какой класс «итератор» переключать, а не жестко кодировать 1-4.

mykaf 13.02.2023 18:26

Я голосую за закрытие этого вопроса, потому что он основан на мнении

JBaczuk 13.02.2023 18:29

Какой у вас HTML? Нам нужно достаточно кода, чтобы воспроизвести вашу проблему, и ваша проблема заключается не только в повторяющемся JavaScript. См. руководство «минимальный воспроизводимый пример».

David Thomas 13.02.2023 18:35

Я считаю, что я включил достаточно кода и контекста для решения проблемы. Полный HTML не требуется, потому что контекст можно понять из JS и письменного описания. Посмотрите другие ответы, они предлагают элегантные решения.

nilemonster 13.02.2023 19:31

Кроме того, я не уверен, почему это должно быть закрыто, поскольку оно основано на мнении. Это относится почти ко всем вопросам на этом форуме. Согласно ответам, которые я получил здесь, есть объективно более элегантные решения!

nilemonster 13.02.2023 19:32

«Я считаю, что включил достаточно кода и контекста» — и все же ожидания и требования сайта расходятся с вашей самооценкой. Цель сайта не в том, чтобы помочь вам, а в том, чтобы предоставить полезные ответы, которые могут помочь вам и будущим посетителям, у которых, скорее всего, будет другой HTML, научиться использовать и применять код в своей ситуации. С кодом, который воспроизводит вашу проблему, мы можем продемонстрировать вам и другим, как можно реализовать решение.

David Thomas 14.02.2023 09:22

Я не согласен с вашей интерпретацией правил сайта. Я дал достаточно контекста в коде, а также свою запись. Я держал это предельно ясно. Это обеспечивает контекст, который показывает всем, кто видит этот вопрос, о чем он. Его можно применить к любому классу, переключающему любой HTML. Вопрос был о том, как избежать повторения JS в пользу более элегантного решения с меньшим количеством строк:

nilemonster 14.02.2023 11:08

«Я переключаю классы в таблице, чтобы скрыть определенные столбцы на основе флажков, выбранных пользователем над таблицей. Флажки имеют идентификаторы «product_1», «product_2» и т. д.».

nilemonster 14.02.2023 11:08
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
10
64
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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 означают, что таблица должна существовать, чтобы флажки существовали (они формируются из одного и того же выбора продукта). Таким образом, пользователь не может установить флажок, и таблица не будет видна. Однако, вероятно, стоит добавить в любом случае!

nilemonster 13.02.2023 19:34

Другие вопросы по теме