javascript - 如何使用 .css 函数通过 jquery 切换 css

Question

该功能是通过一个按钮触发的，所以我认为每次按下它都会检查 x 相应地设置背景并将 x 置于其他状态，以便下一次按下会给出其他结果

我刚刚看到我可以在 .toggle 中使用 .css，但我仍然很好奇为什么我的解决方案不起作用

var x = 0;

function toggledark(x){
    if (x == 0) {
        $('body').css({'background-color': 'red'});
        x+=1;
        return x;
    }
    else {
        $('body').css({'background-color': 'black'});
        x-=1;
        return x;
    }
}

我以为它会切换，但我只变黑，它保持这种状态

Answer 1

不需要 x 作为整数，除非你有其他操作要做..但是当你使用 red 和 black 时，你可以使用它像这样

var color = 'red';   // default background color
function toggledark(){
   color = (color == 'red') ? 'black' : 'red';
   $('body').css({'background-color': color });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button onclick="toggledark()">Toggle</button>

如果您还有其他操作要做并且必须使用 if 语句，您可以像这样使用它

var color = 'red';   // default background color
function toggledark(){
   color = (color == 'red') ? 'black' : 'red';
   $('body').css({'background-color': color });
   if(color == 'red'){
      console.log('Red Theme');
   }
   if(color == 'black'){
      console.log('Black Theme');
   }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button onclick="toggledark()">Toggle</button>