更改點擊上所有按鈕的顏色

只有第一個按鈕的顏色發生了變化。點擊任何其他按鈕後會發生變化。

會發生什麼：

按鈕的顏色應該得到上點擊該特定按鈕改變。

我犯了什麼錯誤，搞不清楚。

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

\t #search-box{ 
 
\t height: 600px; 
 
    width: 600px; 
 
    background:red; 
 
    display: none; 
 
    font-size: xx-large; 
 

 
\t } 
 
\t 
 
    #button{ 
 
\t height: 20px; 
 
    width: 40px; 
 
    background:pink; \t 
 
\t }

<! 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=""> 
 

 
\t 
 
<!-- 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> 
 
    
 
\t <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> 
 
\t <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> 
 
\t <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> 
 
\t <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> 
 
\t <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> 
 
\t 
 
    \t 
 
<!-- 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> \t

來源

2016-05-07 Learner

你有失誤的HTML元素：'風格= 「保證金：10px的;」「顏色：粉紅色」雙中心報價沒有預期。 'id'標籤被設計爲獨一無二的，爲了使用提交數據，改爲'class'tag，可能會添加唯一的'name'或'id'。 –

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

來源

2016-05-07 10:26:20

我用類與按鈕，並嘗試以上jquery，但它不工作 – Learner

完美的作品，我把所有的代碼在這裏[jssfiddle]（https://jsfiddle.net/jeanLucB/a1v4pzc5/1/）和我的更新後。 –

雖然這工作正常，但這不是我的查詢:) :( 應該發生什麼：該按鈕的顏色應該改變點擊特定的按鈕，而不是「btn btn默認btn成功」。這個按鈕只是意思是打開搜索div。在這個div裏面的按鈕，當單獨點擊時應該改變它們各自的顏色 – Learner

更改點擊上所有按鈕的顏色

回答

相關問題