как использовать querySelector для идентификатора данных и типа ввода

Question

Я хочу установить className для 2 типов ввода, первый - это поле ввода, а другой - кнопка. Изначально оба скрыты, и при нажатии кнопки я хочу показать их оба. Загвоздка здесь в том, что отображается несколько сеток (по одной для каждой записи), и в зависимости от того, где произошел щелчок, я буду отображать соответствующее поле ввода и кнопку.

Теперь я использую ниже для отображения поля ввода:

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

Я заполняю атрибут data-id для типа ввода с помощью значения записи c, чтобы различать, где произошел щелчок. Теперь, если я хочу скрыть кнопку, мне придется использовать аналогичный оператор, но мне все равно нужно использовать значение атрибута 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";'