我想简化这个 javascript 代码我该怎么做

Question

我不想重复几乎相同的代码

看起来像这样

const text01_edit = document.querySelector(".text01_edit");
const input_text01 = document.querySelector(".text01_contain");

const text02_edit = document.querySelector(".text02_edit");
const input_text02 = document.querySelector(".text02_contain");

// txt
const txtFunction = function (txt) {
  txt.disabled = false;
  txt.setSelectionRange(txt.value.length, txt.value.length);
};
text01_edit.addEventListener("click", function () {
  txtFunction(input_text01);
});

text02_edit.addEventListener("click", function () {
  txtFunction(input_text02);
});

如果我需要添加更多（例如：text3、text4）

我只能添加更多这样的吗？

或者有什么东西可以简化这段代码。 我尝试在我的 function 中使用它，但它不起作用，也许用于？

如果您不明白英语不是我的语言，请告诉我！

Answer 1

您可以将 class 属性添加到要添加此事件侦听器的所有输入。 假设您添加了 class text-input ，那么您将执行以下操作：

const textInputs = document.querySelectorAll(".text-input");
textInputs.forEach(element => {
    element.addEventListener('click', txtFunction )
})

querySelectorAll返回一个匹配元素的数组，然后我们遍历它们添加附加相同的 function 作为事件侦听器。

Answer 2

希望这会有所帮助，

 var textbtn = document.querySelectorAll(".textbtn"); for (i = 0; i < textbtn.length; i++) { textbtn[i].addEventListener('click', function() { var id = this.getAttribute('data-id'); document.getElementById(id).disabled = false; }); }

 <body> <table class=" table table-hover text-nowrap"> <thead> <tr> <th>title</th> <th>text</th> <th>btn</th> </tr> </thead> <tbody> <tr> <td>test1</td> <td> <input type="text" id="text01" value="text" disabled="true"> </td> <td> <label class="textbtn" data-id="text01">click</label> </td> </tr> <tr> <td>test2</td> <td> <input type="text" id="text02" value="text" disabled="true"> </td> <td> <label class="textbtn" data-id="text02">click</label> </td> </tr> </tbody> </table> </body> </html>

我想简化这个 javascript 代码我该怎么做

问题描述

2 个解决方案

解决方案1
0 2022-11-25 11:41:54

解决方案2
0 2022-11-25 11:45:36

我想简化这个 javascript 代码我该怎么做

问题描述

2 个解决方案

解决方案1 0 2022-11-25 11:41:54

解决方案2 0 2022-11-25 11:45:36

解决方案1
0 2022-11-25 11:41:54

解决方案2
0 2022-11-25 11:45:36