如何使用 jQuery 更改 div 背景 onclick答案

【问题标题】：How to change div background onclick with jQuery如何使用 jQuery 更改 div 背景 onclick
【发布时间】：2020-09-10 14:17:00
【问题描述】：

我希望 div 的背景改变按钮所在的位置。现在它同时改变了，我知道为什么，但我不知道如何让它们自己工作。

当我在 server1 中按下“是”按钮时，我希望 server 1 的背景颜色为红色，当我再次按下按钮时，它必须再次为原始颜色。我不介意脚本是否完全不同，但我想保留 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>

【问题讨论】：

"green = !green" 不是有效的 JavaScript。我假设您的意思是“绿色！==绿色”，这将永远是错误的。您正在将布尔值 false 与不等式进行比较。
在元素上切换一个类
你想在点击自己的按钮yes时更改serverstatus的背景吗？
当我按下 div id=server1 中的按钮时，我希望改变背景
这听起来很奇怪 :) 但是您如何识别绿色逻辑？它只是一个逻辑切换器吗？因为，使用 jQuery，我们可以有条件地以更好的方式切换 css 类......你如何启动你的服务器“状态”？它来自数据库吗？

标签： javascript html jquery css dom

【解决方案1】：

我使用以下步骤更新了您的代码（仅将您的代码更改为使用解决方案，没有进行清理和重构）：

toggleStatus 函数现在接受 server_name 和 color_name 两个参数
toggleStatus 函数定义已更新更改通过 server_name 的背景颜色

在再次点击时将其改回的步骤（基于评论中的反馈）：

用你的颜色名称创建三个css classes作为背景同名颜色
更新toggleStatus 函数以切换css class 的color_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>

【讨论】：

这可行，但是当再次按下该按钮时如何将颜色更改回原始颜色？
是的，它不会切换！您可以使用他的逻辑切换器作为参数，并根据您选择应用哪种颜色...
@DamianBloemhof，更新了答案并添加了两个解释步骤
@kewlashu 对不起，我是新手，我真的不知道该怎么做，你可以提供一点 css 吗？
@DamianBloemhof，你可以在我的回答代码中找到<style> </style>标签之间添加的css

【解决方案2】：

我尽量保持原样。我还删除了任何 JQuery 代码，因此除非您在其他地方需要它，否则您可以删除该引用以稍微修剪页面。

我已将 toggleStatus() 替换为 toggleStatus(this) 以便它传递元素（在本例中为按钮），以便在函数中引用它。

因为你的 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>

两次向上父/子树将获取 server# div。这就是在以下 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】：

好吧，我不确定我是否应该做你的功课，但这是一个（不是最佳的）解决方案。我也会改变你的 HTML，但我把它留给你。

这会将所有设置为绿色，将点击的设置为红色。还有更优雅的解决方案

function toggleStatus(e) {
    $("#maindiv .serverstatus").each(function ()
        {
            $(this).css("background-color", "#639919");
        });

    $(e).parent().parent().css("background-color", "#ff0000");
};

【讨论】：

嗯，它不是家庭作业，它是我正在做的一个项目，但是谢谢，但我应该用这个替换当前功能吗？
是的，如果它满足所需的功能，你可以用这个替换它。试试看吧。