应用于相同元素类型的多个实例的 onclick 函数

Question

Javascript新来的。

我正在尝试练习 Javascript，并希望按照本例中所做的内容重新创建一些东西： Change Button color onClick

但是，我希望将此操作应用于多个 "buttons"（输入），以便在单击单个按钮时，该按钮和该按钮单独改变颜色。

我以我认为可以容纳多个按钮的方式重新创建了上面的示例，但是单击其中任何一个只会更改第一个按钮的颜色。

非常感谢 如果有人可以 explain/give 一些按钮独立运行的示例。

Answer 1

通过快速查看该示例，您应该能够通过执行此操作来更改任何给定按钮的颜色

<input type="button" id="button1" value = "button" style= "color:white" onclick="setColor('button1', '#101010')";/>

<input type="button" id="button2" value = "button" style= "color:white" onclick="setColor('button2', '#101010')";/>

设置颜色有两个参数，第一个是按钮 ID。所以我们将每个按钮的唯一 ID 传递给函数。在这种情况下 button1 和 button2

Answer 2

您需要在 javascript 中使用 this 语句。这将更改实际单击的元素的属性。

这是一个例子：

var main = function () {        
    $('.button').click(function() {
        $(this).css('background-color' : 'red');
    });
};

Answer 3

这会起作用：

很好地分离关注点（您应该避免将 javascript 代码与 html 混合）
不使用外部库（例如 jQuery）

<html>
<head>
  <script>
    function init() {
      var buttons = document.querySelectorAll('input[type=button]');

      [].forEach.call(buttons, function(button) {
        button.addEventListener('click', function(e) {
          e.target.style.backgroundColor = e.target.getAttribute('data-color');
        });
      });

    }
  </script>
</head>

<body onload="init()">
  <input type="button" value="button" style="color:white" data-color="#101010" />
  <input type="button" value="button" style="color:white" data-color="#bada55" />
  <input type="button" value="button" style="color:white" data-color="#400400" />
</body>
</html>

应用于相同元素类型的多个实例的 onclick 函数

Onclick function applied to multiple instances of same element type

html

javascript

css

input

onclick