Javascript: 如何显示我点击的这些元素？

Question

我必须为点击采用数据过滤器属性，因为这些是 <ul> 列表的唯一区别，我无法更改它们的内部 HTML。

现在它只能与“Phone”一起使用，但我希望“Phone”在我单击时消失，例如“平板电脑”。

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/

Answer 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));

Answer 2

这就是你想要的吗？每次点击显示所点击项目的内容。

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;
    });
});

Answer 3

您可以尝试这样的操作：

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>

Javascript: 如何显示我点击的这些元素？

Javascript: How to I display these elements I clicked?

javascript

arrays

click

display