更改點擊時所有按鈕的顏色
[英]change color of all buttons on click
問題描述
發生了什么：
僅第一個按鈕的顏色被更改。 單擊任何其他按鈕即可更改它。
應該發生什么：
單擊該特定按鈕后，該按鈕的顏色應更改。
我犯了什么錯誤，無法弄清楚。
/*search-box*/ $('#click').click(function() { $("#search-box").toggle(); }); /*seat-color*/ var count = 1; function setColor(btn, color) { var property = document.getElementById(btn); if (count == 0) { property.style.backgroundColor = "#FFC0CB" count = 1; } else { property.style.backgroundColor = "#800080" count = 0; } }
#search-box{ height: 600px; width: 600px; background:red; display: none; font-size: xx-large; } #button{ height: 20px; width: 40px; background:pink; }
<! doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" > <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" > <!-- Custom CSS --> <link href="custom_css/main.css" rel="stylesheet" type='text/css'> </head> <body> <button type="submit" class="btn btn-default btn-success" id="click" value="Show/Hide"><span class="glyphicon glyphicon-off"></span>Search</button> <div id="search-box"> <table> <tr> <td><input type="button" id="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td> <td><input type="button" id="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td> <td><input type="button" id="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td> <td><input type="button" id="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td> <td><input type="button" id="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td> <td><input type="button" id="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td> </tr> <tr> <td><input type="button" id="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td> <td><input type="button" id="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td> <td><input type="button" id="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td> <td><input type="button" id="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td> <td><input type="button" id="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td> <td><input type="button" id="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td> </tr> <tr> <td><input type="button" id="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td> <td><input type="button" id="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td> <td><input type="button" id="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td> <td><input type="button" id="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td> <td><input type="button" id="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td> <td><input type="button" id="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td> </tr> <tr> <td><input type="button" id="button" style="margin:10px;" "color:pink"onclick="setColor('button', '#101010');"/></td> <td><input type="button" id="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td> <td><input type="button" id="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td> <td><input type="button" id="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td> <td><input type="button" id="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td> </tr> </table> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script> <!--Custome Jquery--> <script src="custom_js/main.js"></script> </body> </html>
1 個解決方案
解決方案1
1 已采納 2016-05-07 10:26:20
使用JQuery：
<html>
<title>Demo</title>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<style>
</style>
</head>
<body>
<button type="submit" class="btn btn-default btn-success" id="click" value="Show/Hide"><span class="glyphicon glyphicon-off"></span>Search</button>
<div id="search-box">
<table>
<tr>
<td><input type="button" class="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td>
<td><input type="button" class="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td>
<td><input type="button" class="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td>
<td><input type="button" class="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td>
<td><input type="button" class="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td>
<td><input type="button" class="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td>
</tr>
<tr>
<td><input type="button" class="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td>
<td><input type="button" class="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td>
<td><input type="button" class="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td>
<td><input type="button" class="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td>
<td><input type="button" class="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td>
<td><input type="button" class="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td>
</tr>
<tr>
<td><input type="button" class="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td>
<td><input type="button" class="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td>
<td><input type="button" class="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td>
<td><input type="button" class="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td>
<td><input type="button" class="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td>
<td><input type="button" class="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td>
</tr>
<tr>
<td><input type="button" class="button" style="margin:10px;" "color:pink"onclick="setColor('button', '#101010');"/></td>
<td><input type="button" class="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td>
<td><input type="button" class="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td>
<td><input type="button" class="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td>
<td><input type="button" class="button" style="margin:10px;" "color:pink" onclick="setColor('button', '#101010');"/></td>
</tr>
</table>
</div>
<script type="text/javascript">
// Set firstime color if needed
toogleColor();
$('#click').click(function() { toogleColor(); });
function toogleColor() {
$('.button').each(function(el) {
console.log('coucou');
this.style.backgroundColor = this.style.backgroundColor !== "blue"
? "blue"
: "red";
});
}
</script>
</body>
</html>
用自定義按鈕反應Native FlatList，如何在單擊時更改顏色？
[英]React Native FlatList with custom buttons, how to change color on click?
如何在 reactjs 中單擊更改兩個按鈕的不同背景顏色？
[英]How to change different background color of two buttons on single click in reactjs?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.