如何仅获取在 JavaScript 中具有相同 class 的一组按钮中单击的一个按钮的值？

Question

我正在处理一项任务，但我无法仅获取一个按钮onclick的属性值。 唯一的问题是它们共享相同的 class 并且都使用内联 onclick 触发相同的onclick 。 因此，当我遍历该 class 的所有实例时，它会在您单击任何按钮时将所有属性值调用到控制台中，如下所示：

red
green
blue

如何仅获取我单击的按钮的属性值？

我尝试使用this ，但据我了解， this无法与现代 JS function 语法一起使用。 我将其修改为const inline = function() {...} this仍然行不通。 还有其他方法可以做到这一点吗？

谢谢！

<div>
    <h3>inline</h3>
    <button class="color" style="background-color: red; color: white;" type="button" onclick="inline()" data-value="red">Red</button>
    <button class="color" style="background-color: green; color: white;" type="button" onclick="inline()" data-value="green">Green</button>
    <button class="color" style="background-color: blue; color: white;" type="button" onclick="inline()" data-value="blue">Blue</button>
</div>

const inline = () => {
    let color = document.querySelectorAll('.color');
    // let color = this;
    for (let i = 0; i < color.length; i++) {
        console.log(color[i].getAttribute("data-value"));
    }
}

Answer 1

您可以将event传递给您的inline() function 调用，然后使用e.currentTarget获取触发事件的按钮元素。 这样，您可以通过在事件目标上使用dataset来获取其颜色。

请参见下面的示例：

 const inline = e => { let btn = e.currentTarget; let color = btn.dataset.value; console.log(color); }

 <div> <h3>inline</h3> <button class="color" style="background-color: red; color: white;" type="button" onclick="inline(event)" data-value="red">Red</button> <button class="color" style="background-color: green; color: white;" type="button" onclick="inline(event)" data-value="green">Green</button> <button class="color" style="background-color: blue; color: white;" type="button" onclick="inline(event)" data-value="blue">Blue</button> </div>

或者，如果您不想使用event （由于它的脆弱性），您可以通过this而不是event ，它将引用单击的按钮，如下所示：

 const inline = btn => { let color = btn.dataset.value; console.log(color); }

 <div> <h3>inline</h3> <button class="color" style="background-color: red; color: white;" type="button" onclick="inline(this)" data-value="red">Red</button> <button class="color" style="background-color: green; color: white;" type="button" onclick="inline(this)" data-value="green">Green</button> <button class="color" style="background-color: blue; color: white;" type="button" onclick="inline(this)" data-value="blue">Blue</button> </div>

但是，将 HTML 和 JS 混合在一起通常不是一个好主意，因为您应该将标记和 JS 逻辑分开。 因此，您应该考虑在 JS 代码中通过循环所有按钮元素来使用事件侦听器：

 document.querySelectorAll(".color").forEach(btn => { btn.addEventListener("click", function() { const color = this.dataset.value; console.log(color); }); });

 <div> <h3>inline</h3> <button class="color" style="background-color: red; color: white;" type="button" data-value="red">Red</button> <button class="color" style="background-color: green; color: white;" type="button" data-value="green">Green</button> <button class="color" style="background-color: blue; color: white;" type="button" data-value="blue">Blue</button> </div>