Javascript：如何显示我点击的这些元素？答案

【问题标题】：Javascript: How to I display these elements I clicked?Javascript：如何显示我点击的这些元素？
【发布时间】：2021-12-03 16:47:30
【问题描述】：

我必须为点击使用 data-filter 属性，因为这些是 <ul> 列表的唯一区别，我无法更改它们的内部 HTML。

现在它只适用于“电话”，但我希望“电话”在我点击时消失，例如“平板电脑”。

var outputText = "";

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"]');

var output = document.getElementById('output');

for (var i = 0; i < conbtn.length; i++) {
  outputText += conbtn[i].innerText;
};

conbtn.forEach(function(elem) {
  elem.addEventListener("click", function() {
    document.getElementById('output').innerText = outputText;
  });
});

<div class="container">
  <div class="row">
    <div class="col-6">
      <ul>
        <li data-load-more-status="0" data-first-init="1" class="control all-control" data-filter="*">All</li>
        <li data-load-more-status="0" data-first-init="0" class="control" data-filter=".eael-cf-phone">Phone</li>
        <li data-load-more-status="0" data-first-init="0" class="control active" data-filter=".eael-cf-tablet">Tablet</li>
        <li data-load-more-status="0" data-first-init="0" class="control" data-filter=".eael-cf-laptop">Laptop</li>
        <li data-load-more-status="0" data-first-init="0" class="control" data-filter=".eael-cf-pc">PC</li>
      </ul>
    </div>

    <div class="col-6">
      <p id="output" style="text-align:center;font-size: 20px;">Output:
      </p>
    </div>
  </div>
</div>

https://jsfiddle.net/8debzkh3/

【问题讨论】：

只是问.... 为什么不使用简单的选择器而不是列出每个选择器呢？ document.querySelectorAll('li[data-filter]')
你在重新创建收音机或复选框似乎也很奇怪
您需要运行在点击发生时获取选择的代码。您当前的代码仅在页面加载时执行此操作。 for( var i = 0; i < conbtn.length; i++ ) {.... 代码不会继续运行

标签： javascript arrays click display

【解决方案1】：

我会定义一个接收事件的函数，并将输出元素的内部文本更新为事件目标的内部文本：

const conbtn = document.querySelectorAll('li[data-filter]');
const output = document.getElementById('output');

function updateOutput(e) {
    output.innerText = e.target.innerText;
}

conbtn.forEach(elem => elem.addEventListener("click", updateOutput));

【讨论】：

我不认为他们实际上意味着隐藏元素。
@epascarello 感谢您通知我我的错误；我更新了。

【解决方案2】：

你可以试试这样的：

var outputText = "";

// XYZ would be replaced with a better class name
const conbtn = document.querySelectorAll('.xyz .control');

var output = document.getElementById('output');

conbtn.forEach(function(elem) {
  elem.addEventListener("click", function() {
    output.innerText = elem.innerText;
  });
});

<div class="container">
  <div class="row">
    <div class="col-6">
      <ul class="xyz">
        <li data-load-more-status="0" data-first-init="1" class="control all-control" data-filter="*">All</li>
        <li data-load-more-status="0" data-first-init="0" class="control">Phone</li>
        <li data-load-more-status="0" data-first-init="0" class="control active">Tablet</li>
        <li data-load-more-status="0" data-first-init="0" class="control">Laptop</li>
        <li data-load-more-status="0" data-first-init="0" class="control">PC</li>
      </ul>
    </div>

    <div class="col-6">
      <p id="output" style="text-align:center;font-size: 20px;">Output:
      </p>
    </div>
  </div>
</div>

【讨论】：

【解决方案3】：

这就是你所追求的吗？每次点击都会显示所点击项目的内容。

const conbtn = document.querySelectorAll('li[data-filter]');
const output = document.getElementById('output');

conbtn.forEach(function(elem) {
    elem.addEventListener("click", function(e) {
        output.innerText = e.target.innerText;
    });
});

【讨论】：