如何在 data-id 和輸入類型上使用 querySelector

Question

我想為 2 種輸入類型設置 className，第一種是輸入框，另一種是按鈕。 最初，兩者都是隱藏的，單擊按鈕時，我想同時顯示它們。 這里要注意的是顯示了多個網格（每條記錄一個），並且根據單擊發生的位置，我將顯示它們各自的輸入框和按鈕。

現在，我使用下面來顯示輸入框：

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

我正在使用記錄特定值填充輸入類型的 data-id 屬性，以區分點擊發生的位置。 現在，如果我想隱藏按鈕，我將不得不使用類似的語句，但我仍然需要使用 data-id 屬性值。 如何將 data-id 和 type ="button" 與 querySelector 一起使用？

Answer 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";'