JavaScript如何实现点击带data-filter属性的li元素时动态切换展示内容？

原代码问题说明 #

• document.querySelectorAll只支持传入单个选择器字符串，你拆分多个参数的写法会导致除第一个选择器外其余全部失效，仅能匹配到Phone选项
• 选择器中Laptop、PC的大写写法与HTML里data-filter属性的小写值不匹配，无法选中对应元素
• 提前拼接了所有选中元素文本为固定值，点击时直接赋值该固定值，无法随点击元素切换内容

可用实现代码 #

// 多个选择器用逗号分隔合并为单个字符串，统一大小写匹配HTML属性
const conbtn = document.querySelectorAll('li[data-filter=".eael-cf-phone"], li[data-filter=".eael-cf-tablet"], li[data-filter=".eael-cf-laptop"], li[data-filter=".eael-cf-pc"]');
const output = document.getElementById('output');

conbtn.forEach(function(elem) {
  elem.addEventListener("click", function() {
    // 点击时直接读取当前触发元素的文本赋值到输出区域
    output.innerText = 'Output: ' + this.innerText;
  });
});

简化优化方案 #

如果需要把All选项也纳入点击交互范围，不需要逐个匹配data-filter属性，直接通过公共类名选中所有选项即可：

const conbtn = document.querySelectorAll('li.control');
const output = document.getElementById('output');

conbtn.forEach(function(elem) {
  elem.addEventListener("click", function() {
    output.innerText = 'Output: ' + this.innerText;
  });
});

内容的提问来源于stack exchange，提问作者Tomek