Question

发生了什么：

仅第一个按钮的颜色发生变化。点击任何其他按钮就会改变它。

会发生什么：

单击该特定按钮时，应更改按钮的颜色。

我犯了什么错，弄不清楚。

/*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>

Answer 1

使用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>

点击后更改所有按钮的颜色

1 个答案: