Можно ли использовать шаблонные строки с объектом classList для вызова методо remove и add по условию?

Question

Для того чтобы не использовать два практически одинаковых цикла с if else для выделения всех строк в таблице и снятия выделения пытаюсь использовать несколько вложенных выражений в шаблонной строке. Пример ниже в 4 строке кода Пробовал много вариантов - не получается. Может этот случай не сработает? Метот classList.toggle('table-active') не подходит.

rows.forEach(row => {
  const checkbox = row.querySelector('i')
  const condition = this.selectedRows.length === rows.length

  `row.classList.${condition ? 'remove' : 'add'}('table-active')`

   checkbox.textContent = condition ? '' : '✓'
 })
 this.selectedRows = document.querySelectorAll('.table tbody tr.table-active')

Answer 1

Можно у объекта обращаться не через точку, а через квадратные скобки. Будет примерно такое:

let element = document.getElementById('test');
let method = getMethod();
element.classList[method]('testy');
              // ^^^^^^^^
setTimeout(() => {  
  let method = getMethod(false);
  element.classList[method]('testy');
                // ^^^^^^^^
}, 2000);


function getMethod(flag = true) {
  return flag ? 'add' : 'remove';
}

.testy {
  border: 1px solid black;
}

<div id="test">test</div>

Answer 2

Не думаю что в данном случае игра стоит свеч. Всегда следует стремиться к понятности кода, если if/else c однострочниками можно записать в 2 строки.

Посмотрите, количество строк столько же сколько и в вопросе, однако нет никаких хитрых действий, если и можно ругать этот код то только за форматирование if/else, но не к такому сокращению строк нужно стремиться, следует избегать излишнего исполнения кода, надуманности в необходимости некоторых функций и конструкций:

rows.forEach(row => {
  const checkbox = row.querySelector('i')

  if (this.selectedRows.length === rows.length) row.classList.add('table-active')
  else row.classList.remove('table-active')

  checkbox.textContent = condition ? '' : '✓'
})
this.selectedRows = document.querySelectorAll('.table tbody tr.table-active')

Если же хочется применить шаблонные строки, то можно применять например так:

element.className = `${conditon ? 'active' : ''} other_class`

Таким образом шаблонная строка подставит либо имя класса либо строку нулевой длины, остальные классы можно прописать по другим условиям либо захардкодить если они не меняются.

БЛОГ НА HUSL

Можно ли использовать шаблонные строки с объектом classList для вызова методо remove и add по условию?

Ответы (2 шт):