我想簡化這個 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