Question

在一个有多个按钮的网站上工作，我希望所有的按钮都可以在您单击按钮时更改颜色。例。单击按钮1，按钮1从白色变为黄色。单击按钮2，按钮2从白色变为黄色。现在，我已经在按钮代码中单击了onclick，它可以工作，除了它可以一次更改所有按钮。

$(document).ready(function() {
  $(".button").click(function() {
    $(".button").css('background', 'yellow');
  });
});

.button {
  background-color: #FFFFFF;
  /* White */
  border: 2px solid #f44336;
  color: black;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 30px;
  border-radius: 50%;
  width: 60px;
  text-align: center;
  cursor: pointer
}

.disabled {
  background-color: #FF0000;
  /* Red */
  color: white;
  cursor: not-allowed;
}

.button-clicked {
  background-color: #FFFF00;
  /* Yellow */
}

td:not(:first-child) {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 5px;
}

<script src="Https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border=1>
  <tr>
    <td align="center"><button class="button" id="1" onclick="myFunction()">1</button></td>
    <td align="center"><button class="button" id="2" onclick="myFunction()">2</button></td>
    <td align="center"><button class="button" id="3" onclick="myFunction()">3</button></td>
  </tr>
</table>

Answer 1

使用您提供的代码提供解决方案，只需将<input type="text" name="list_quantity" value="1" id="count1"> <input type="hidden" name="bought" id="count2"/>更改为$(".button").css('background', 'yellow');

您还可以从HTML中删除onclick。

虽然这是您的代码的有效片段，但其他人为该问题提供了更好的解决方案。

$(this).css('background', 'yellow');

Answer 2

尝试

function myFunction(event) {
    event.target.style="background: yellow";
}

<button class="button" id="1" onclick="myFunction(event)">1</button>
<button class="button" id="2" onclick="myFunction(event)">2</button>
<button class="button" id="3" onclick="myFunction(event)">3</button>

或者这样做（这更好一些，因为我们不使用onclick处理程序（更多信息here））

function myFunction(event) {
   event.target.style="background: yellow";
}

[...document.querySelectorAll('button')].map(x=>x.addEventListener('click',myFunction));

<button class="button" id="1">1</button>
<button class="button" id="2">2</button>
<button class="button" id="3">3</button>

Answer 3

有很多不同的方法可以做到这一点。您可以使用this中的引用function来选择要执行操作的元素，在这种情况下，单击按钮即可。

例如：

<button onclick="changeColor ('yellow')">Button 1</button>
<button onclick="changeColor ('red')">Button 2</button>
<button onclick="changeColor ('green')">Button 3</button>


function changeColor (color) {
    this.style.backgroundColor = "red";
}

Answer 4

是否可以通过onclick将文本数据添加到表格框？按顺序按下。有人单击按钮3，按钮3的ID信息将进入另一个数据框。

多按钮onclick事件

4 个答案: