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

【问题标题】：Onclick function applied to multiple instances of same element typeOnclick 函数应用于相同元素类型的多个实例
【发布时间】：2015-06-17 19:58:30
【问题描述】：

这里是Javascript新手。

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

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

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

如果有人可以解释/举例说明某些按钮的独立行为，我们将不胜感激。

【问题讨论】：

你能贴出你的代码吗

标签： javascript html css input onclick

【解决方案1】：

这将起作用：

具有良好的关注点分离（您应该避免将 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>

【讨论】：

太棒了，谢谢你——这正是我想要的。我现在意识到我忘了提到我还希望按钮在再次单击时切换到它们的原始颜色。我似乎无法在此评论中以任何身份格式化，所以我会告诉你我做了什么我认为可行但没有...我使用逻辑向 click 函数添加了一个条件“if”语句“如果按钮已经具有数据颜色属性，则将其背景更改为原始颜色”。有没有简单的方法来做到这一点？
当然，您可以检查是否e.target.style.backgroundColor === ""（空字符串）。如果它为空，则意味着没有应用内联样式。反之亦然：如果你想清除内联样式，只需设置 e.target.style.backgroundColor = "" ;)

【解决方案2】：

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

<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

【讨论】：

【解决方案3】：

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

这是一个例子：

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

【讨论】：