如何使用 jQuery 更改 div 背景 onclick
[英]How to change div background onclick with jQuery
问题描述
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.
我希望div的背景改变按钮所在的位置。现在它同时改变，我知道为什么，但我不知道如何让它们自己工作。
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.当我在 server1 中按下“是”按钮时，我希望服务器 1 的背景颜色为红色，当我再次按下按钮时，它必须再次为原始颜色。 I don't mind if the script is totally different, but I would like to keep the HTML.我不介意脚本是否完全不同，但我想保留 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 个解决方案
解决方案1
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 parameterstoggleStatus函数现在接受server_name和color_name两个参数 toggleStatusfunction definition updated to change the background color for passedserver_name更新了toggleStatus函数定义以更改传递的server_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创建三个带有颜色名称的css classes，以提供相同名称的背景颜色 - update
toggleStatusfunction to toggle thecss classofcolor_name更新toggleStatus函数以切换color_name的css class
// 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>
解决方案2
2 已采纳 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.我还删除了所有 JQuery 代码，因此除非您在其他地方需要它，否则您可以删除该引用以稍微修剪页面。
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.所以它传递，因此可以在该函数中引用的元件（在这种情况下，按钮）我已经更换toggleStatus（）与toggleStatus（本）。
Since your HTML structure is laid out this way:由于您的 HTML 结构是这样布局的：
<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.向上两次父/子树将获取 server# div。 That is what is compared in the if/else statement inside the following JavaScript:这就是在以下 JavaScript 中的 if/else 语句中进行比较的内容：
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>
解决方案3
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.我也会改变你的 HTML，但我把它留给你。
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");
};
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.