Question

Javascript newb here。

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

但是，我希望将此操作应用于多个“按钮”（输入），这样，只要单击一个按钮，该按钮和该按钮就会改变颜色。

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

如果有人可以解释/给出一些独立行为的按钮的例子，那么将会非常赞赏。

Answer 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>

Answer 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

Answer 3

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

以下是一个例子：

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

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

3 个答案: