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;
    }
}

我以为它会切换，但我只会变黑而且一直这样

标签： javascriptjquerycss

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>