如何在 data-id 和输入类型上使用 querySelector答案

【问题标题】：how to use querySelector on data-id and input type如何在 data-id 和输入类型上使用 querySelector
【发布时间】：2020-07-09 17:05:48
【问题描述】：

我想为 2 种输入类型设置 className，第一种是输入框，另一种是按钮。最初，两者都是隐藏的，单击按钮时，我想同时显示它们。这里的问题是显示了多个网格（每条记录一个），并且根据点击发生的位置，我将显示它们各自的输入框和按钮。

现在，我用下面来显示输入框：

this.template.querySelector(`[data-id="${targetId}"]`).className = "show";

我正在使用记录特定值填充输入类型的 data-id 属性，以区分点击发生的位置。现在，如果我想隐藏按钮，我将不得不使用类似的语句，但我仍然需要使用 data-id 属性值。如何在 querySelector 中同时使用 data-id 和 type ="button"？

【问题讨论】：

【解决方案1】：

这适用于“document.querySelectorAll”，而不是“this.template.querySelectorAll”。

我假设输入字段的顺序始终相同（输入、按钮），并且它们都具有相同的“data-id”值。而且它对他们来说是独一无二的（页面上只有两个具有此 data-id 值的对象）。

onclick='x=this.template.querySelectorAll(`[data-id="targetId"]`);x[0].type="text";x[1].type="button";'

【讨论】：

感谢您的输入，糟糕的是我没有想到 querySelectorAll。下面简单使用： let inp = this.template.querySelectorAll([data-id="${targetId}"]); inp[0].className = "显示"; inp[1].className = "显示";是的，data-id 对他们来说是独一无二的。它现在可以按预期工作了。