javascript - 带有动态参数的 querySelectorAll

Question

我想使用querySelectorAll()动态参数。

这是我尝试过的：

const titleEnabled = (document.getElementById('enable-title').checked) ? '.mt-title' : '';
const storenameEnabled = (document.getElementById('enable-storename').checked) ? '.mt-storename' : '';
const dynamicEnabled = (document.getElementById('enable-dynamic').checked) ? '.mt-dynamic' : '';

const query = titleEnabled + comma(titleEnabled) + storenameEnabled + comma(storenameEnabled, dynamicEnabled) + dynamicEnabled;
console.log('Query: ' + query);

if (titleEnabled || storenameEnabled || dynamicEnabled) {
    const mtCategories = document.querySelectorAll(query);
}

// Return a comma 
const comma = (...arr) => {
    for (let a of arr) {
    if (a !== '') {
        return ', '
    }
    return '';
  }
}

但这是我得到的错误：

未捕获的 DOMException：无法在“文档”上执行“querySelectorAll”：“.mt-storename，”不是有效的选择器。

我的代码有什么问题？

标签： javascript

Answer 1

这将运作良好。

const titleEnabled = (document.getElementById('enable-title').checked) ? '.mt-title' : '';
const storenameEnabled = (document.getElementById('enable-storename').checked) ? '.mt-storename' : '';
const dynamicEnabled = (document.getElementById('enable-dynamic').checked) ? '.mt-dynamic' : '';


const arr = [];
[titleEnabled, storenameEnabled, dynamicEnabled].forEach((item) => {
  if (item) {
    arr.push(item);
  }
});

const query = arr.join(", ");
console.log("Query: " + query);
document.querySelectorAll(query);