How to change div background onclick with jQuery
Question
I want the background of the div changed where the button is in. Now it changes all at same time and I know why, but I don't know how I can make them work on their own.
When I press the "yes" button in server1, I want the background color of server 1 to be red and when I press the button again, it has to be the original color again. I don't mind if the script is totally different, but I would like to keep the HTML.
// var white = false // var bgcolor; // $("button ,yes").click(function () { // if (white = !white) { // bgcolor = $(this).css('backgroundColor'); // $(this).css("background-color", "red"); // } else { // $(this).css("background-color", bgcolor); // } // }); var green = false function toggleStatus() { if (green = !green) { $("#maindiv .serverstatus ").each(function () { $(this).css("background-color", "red"); }); } else { $("#maindiv .serverstatus").each(function () { $(this).css("background-color", "#639919"); }); } }; // function updateStatus(){ // $("#maindiv .serverstatus").each(function(){ // $(this).css("background-color", "red"); // }); // } // // $( document ).ready(function() { // updateStatus(); // }); <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/layout.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <title>Grafiek</title> </head> <body> <h1>Server Stats</h1> <div id="maindiv"> <div id="server1" class="serverstatus"> <h3>(servername1)</h3> <div> Status: </div> <br> <div> Last Checked: </div> <div> Last Online: </div> <div> <button onclick="toggleStatus()">yes</button> </div> </div> <div id="server2" class="serverstatus"> <h3>(servername2)</h3> <div> Status: </div> <br> <div> Last Checked: </div> <div> Last Online: </div> <div> <button onclick="toggleStatus()">yes</button> </div> </div> <div id="server3" class="serverstatus"> <h3>(servername3)</h3> <div> Status: </div> <br> <div> Last Checked: </div> <div> Last Online: </div> <div> <button onclick="toggleStatus()">yes</button> </div> </div> </div> </body> </html>
3 answers
solution1
2 2020-09-10 14:31:04
I updated your code with below steps (only changed your code to become working with solution, didnt do the cleanup and refactoring):
-
toggleStatusfunction is now acceptingserver_nameandcolor_nametwo parameters toggleStatusfunction definition updated to change the background color for passedserver_name
Steps done to change it back on clicking again (based on feedback in comment):
- create three
css classeswith name of your colors to give background color of same name - update
toggleStatusfunction to toggle thecss classofcolor_name
// var white = false // var bgcolor; // $("button ,yes").click(function () { // if (white = !white) { // bgcolor = $(this).css('backgroundColor'); // $(this).css("background-color", "red"); // } else { // $(this).css("background-color", bgcolor); // } // }); var green = false function toggleStatus(server_name,color_name) { //$('#'+server_name).css("background-color", color_name); $('#'+server_name).toggleClass(color_name); }; // function updateStatus(){ // $("#maindiv .serverstatus").each(function(){ // $(this).css("background-color", "red"); // }); // } // // $( document ).ready(function() { // updateStatus(); // }); <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/layout.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <title>Grafiek</title> <style> .red{ background-color:red; } .blue{ background-color:blue; } .green{ background-color:green; } </style> </head> <body> <h1>Server Stats</h1> <div id="maindiv"> <div id="server1" class="serverstatus"> <h3>(servername1)</h3> <div> Status: </div> <br> <div> Last Checked: </div> <div> Last Online: </div> <div> <button onclick="toggleStatus('server1','red')">yes</button> </div> </div> <div id="server2" class="serverstatus"> <h3>(servername2)</h3> <div> Status: </div> <br> <div> Last Checked: </div> <div> Last Online: </div> <div> <button onclick="toggleStatus('server2','green')">yes</button> </div> </div> <div id="server3" class="serverstatus"> <h3>(servername3)</h3> <div> Status: </div> <br> <div> Last Checked: </div> <div> Last Online: </div> <div> <button onclick="toggleStatus('server3','blue')">yes</button> </div> </div> </div> </body> </html>
solution2
2 ACCPTED 2020-09-10 14:55:04
I tried keeping things as close to original as possible. I've also removed any JQuery code so unless you need it elsewhere you can remove that reference to trim the page a bit.
I've replaced toggleStatus() with toggleStatus( this ) so it passes the element (a button in this case) so it can be referenced in the function.
Since your HTML structure is laid out this way:
<div id="server1" class="serverstatus"> <!-- This would be the button's parentNode.parentNode -->
<h3>(servername1)</h3>
<div>
<button onclick="toggleStatus(this)">yes</button>
</div>
</div>
Going up the parent/child tree twice will grab the server# div. That is what is compared in the if/else statement inside the following JavaScript:
function toggleStatus(e) { var parentDiv = e.parentNode.parentNode; var bgColor = parentDiv.style.backgroundColor; if(bgColor == "green"){ parentDiv.style.backgroundColor = "red"; } else{ parentDiv.style.backgroundColor = "green"; } } <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/layout.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <title>Grafiek</title> </head> <body> <h1>Server Stats</h1> <div id="maindiv"> <div id="server1" class="serverstatus"> <h3>(servername1)</h3> <div> Status: </div> <br> <div> Last Checked: </div> <div> Last Online: </div> <div> <button onclick="toggleStatus(this)">yes</button> </div> </div> <div id="server2" class="serverstatus"> <h3>(servername2)</h3> <div> Status: </div> <br> <div> Last Checked: </div> <div> Last Online: </div> <div> <button onclick="toggleStatus(this)">yes</button> </div> </div> <div id="server3" class="serverstatus"> <h3>(servername3)</h3> <div> Status: </div> <br> <div> Last Checked: </div> <div> Last Online: </div> <div> <button onclick="toggleStatus(this)">yes</button> </div> </div> </div> </body> </html>
solution3
1 2020-09-10 14:30:07
Well I am not sure if I should be doing your homework, but here is a (not optimal) solution. I would change you HTML too, but I leave that up to you.
This will set all to green and the clicked one to red. There are more elegant solutions
function toggleStatus(e) {
$("#maindiv .serverstatus").each(function ()
{
$(this).css("background-color", "#639919");
});
$(e).parent().parent().css("background-color", "#ff0000");
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.