如何將函數應用於具有相同類的多個元素？

Question

我有兩個（或更多）具有相同類的按鈕。 我想編寫一個將變量設置為單擊按鈕的值的函數，並希望將此函數應用於我的所有按鈕。 我已經閱讀了有關“this”關鍵字的帖子（ 例如這個），但只有當我將onclick方法放置在我不想做的內聯時它才有效。

這是一個代碼筆

這是我的代碼：

<button class='button' type='button' value='X'>Button 1</button>
<button class='button' type='button' value='Y'>Button 2</button>

var button = document.getElementByClass('button');
var value;

function selectValue(clicked_button) {
      value = clicked_button.value;
}

button.onclick = selectValue;

另外，我不確定，但我是否需要使用循環將功能應用於每個按鈕？ 如：

 for(var i = 0; i <= button.length; i++) {
  button[i].onclick = selectValue; 
}

Answer 1

document.querySelectorAll("button")
    .forEach(btn => btn.addEventListener("click", e => selectValue(btn)));

Answer 2

• 函數getElementByClass不存在，請改用querySelector 。
• 循環您的按鈕元素並添加 onclick 事件。

建議：改用addEventListener 。

 var buttons = document.querySelectorAll('.button'); var value; function selectValue() { value = this.value; console.log(value); } for (btn of buttons) btn.onclick = selectValue;

 button { width: 70px; height: 40px; }

 <button class='button' type='button' value='X'>Button 1</button> <button class='button' type='button' value='Y'>Button 2</button>

資源

• document.querySelectorAll()
• EventTarget.addEventListener()

Answer 3

您的代碼中有幾個錯誤：

• 沒有getElementByClass函數。 我不知道你的代碼是如何運行的。 它被稱為getElementsByClassName 。
• getElementsByClassName返回一個元素數組（在您的示例中為 2），因此您必須遍歷它並添加onclick事件。
• 要訪問onclick事件處理程序中的當前按鈕，請使用this 。 您不能將所需的任何參數傳遞給函數，因為它的簽名是固定的。 它傳遞了對事件本身的引用，而不是被點擊的元素，所以clicked_button這個名字是騙人的。 我們通常稱該參數為event ，或簡稱為e 。 您可以使用event.target訪問元素，但使用this更容易。

試試這個（我添加了console.log行只是為了演示，但你不需要它）：

 var value; var buttons = document.getElementsByClassName('button'); for (var i = 0; i < buttons.length; i++) { buttons[i].onclick = selectValue; } function selectValue() { value = this.value; console.log(value); }

 <button class='button' type='button' value='X'>Button 1</button> <button class='button' type='button' value='Y'>Button 2</button>

Answer 4

是的，您需要在 HTMLCollection buttons上使用循環

function selectValue(event) {
  value = event.target.value;
}
var button = document. getElementsByClassName('button');
for (var i = 0; i < button.length; i++) {
  button[i].onclick = selectValue;
}

Answer 5

如果使用 jquery，您可以使用以下任一方法而無需循環。

1. 這將為單擊的按鈕設置值

   var valueToSet = 'XX';
   $(document).on('click', '.button', function () { $(this).val(valueToSet); });

2. 這將為每個具有類名按鈕的元素設置相同的值

   var valueToSet = 'XX';
   $(document).on('click', '.button', function () { $('.button').val(valueToSet); });

3. 在按鈕以外的其他元素具有類名按鈕的情況下使用此選項

   var valueToSet = 'XX'; $("button.button").click(function(){ if($(this).attr("class") == 'button'){ $('button.button').val(valueToSet); } });