使背景像单选按钮一样在打开状态和关闭状态之间切换，当单击它时

Making a background like a radio button switching between an on state on off state when clicking on it

本文关键字：状态 之间 单击 单选按钮 背景 一样      更新时间：2023-09-26

我完全搞不懂了。

Html: 

<p onclick="on(&quot;test&quot;, testSwitch)" id="test" style="background:red;">TEST THIS STUFF OUT</p>

Js: 

var testSwitch = 0;
function on(element, machineSwitch){
    if (machineSwitch==0){
        document.getElementById(element).style.display="green";
        document.getElementById(element).innerHTML="STATUS:ON";
        machineSwitch=1;
    }
    else if(machineSwitch==1){
    document.getElementById(element).style.display="red";
    document.getElementById(element).innerHTML="STATUS: OFF";
    machineSwitch=0;
    }
}

我试图使它，使背景变化为绿色时，点击，然后红色时，再次点击。背景应该通过这些循环。我还需要一个变量来控制它，因为我要用它来控制循环是否在其他地方发生

使用element.style.background更改BG颜色

HTML 

<p onclick="on(this)" id="test" style="background:red;">TEST THIS STUFF OUT</p>

JS 

var testSwitch = 0;
var machineSwitch = 0;
function on(element){
    if (machineSwitch==0){
        element.style.background="green";
        element.innerHTML="STATUS:ON";
        machineSwitch=1;
    } else if(machineSwitch==1){
        element.style.background="red";
        element.innerHTML="STATUS: OFF";
        machineSwitch=0;
    }
}

如果你要添加更多的颜色，使用data-属性和case switch属性更方便，更灵活。

JS 

function on(element){
    switch (element.getAttribute('data-machineSwitch')) {
        case '0':
            element.style.background="green";
            element.innerHTML="STATUS:ON";
            element.setAttribute('data-machineSwitch', '1');
            break;
        case '1':
            element.style.background="red";
            element.innerHTML="STATUS:OFF";
            element.setAttribute('data-machineSwitch', '0');
            break;
    }
}

<p onclick="on('test', testSwitch)" id="test" style="background:red;">TEST THIS STUFF OUT</p>
<script>
var testSwitch = 0;
function on(element, machineSwitch){
    if (machineSwitch==0){
        document.getElementById(element).style.backgroundColor ="green";
        document.getElementById(element).innerHTML="STATUS:ON";
        testSwitch=1;
    }
    else if(machineSwitch==1){
     document.getElementById(element).style.backgroundColor="red";
     document.getElementById(element).innerHTML="STATUS: OFF";
     testSwitch=0;
    }
}
 </script>
相关文章：