多按钮点击事件
[英]Multiple button onclick event
问题描述
Working on a site with multiple buttons, all I want the buttons to do it when you click on them change color.
在一个有多个按钮的网站上工作，我希望按钮在你点击它们时改变颜色。 Example.例子。 Click button 1 and button 1 changes from white to yellow.单击按钮 1，按钮 1 从白色变为黄色。 Click on button 2 and button 2 changes from white to yellow.单击按钮 2，按钮 2 从白色变为黄色。 Right now I have onclick in the button code and it works, except it changes all the buttons at once.现在我在按钮代码中有 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>
3 个解决方案
解决方案1
1 已采纳 2019-02-11 19:09:13
Heres a solution using the code you provided, you just need to change $(".button").css('background', 'yellow'); 这是使用您提供的代码的解决方案，您只需更改$(".button").css('background', 'yellow'); to $(this).css('background', 'yellow'); 到$(this).css('background', 'yellow');
You can also remove onclick from your HTML. 您也可以从HTML中删除onclick。
While this is a working snippet with your code, others have provided better solutions to this problem. 尽管这是您的代码的一个不错的摘录，但其他人为该问题提供了更好的解决方案。
<!DOCTYPE html> <html> <head> <script src="Https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(document).ready(function () { $(".button").click(function () { $(this).css('background', 'yellow'); }); }); </script> <style> .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; } </style> </head> <body> <table width="100%" border=1> <tr> <td align="center"><button class="button" id="1">1</button></td> <td align="center"><button class="button" id="2">2</button></td> <td align="center"><button class="button" id="3">3</button></td> </body> </html>
解决方案2
0 2019-02-11 19:03:35
Try 尝试
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>
Or this (which is a little better because we not use onclick handler (more info here )) 或这个（更好一点，因为我们不使用onclick处理程序（更多信息在这里 ））
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>
解决方案3
0 2019-02-11 19:05:04
There a lot of different ways to do this. 有很多不同的方法可以做到这一点。 You could use the reference this inside the function to select the element suffering the action, in this case the button clicked. 您可以使用引用this内部function来选择痛苦的动作元素，在这种情况下，按钮点击。
For example: 例如：
<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";
}
解决方案4
0 2019-02-12 15:56:43
Is there a way to onclick add text data to a table box? 有没有办法onclick将文本数据添加到表格框？ In the order it was pressed. 按顺序按下。 Someone clicks button 3 the id info from button 3 goes into a different data box. 有人单击按钮3，来自按钮3的ID信息进入另一个数据框。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.