Javascript jquery css颜色更改返回和fortfh

我想在单击按钮时更改段落的颜色。单击按钮，p变为绿色，再次单击，p变为红色。。。。。 为什么我的代码不起作用

window.onload=function（）{
$（'p'）.css（'color'，'rgb（255,0,0'））
$（“#按钮”）。单击（函数（）{
颜色=$（'p'）.css（'color'））
如果（颜色=‘rgb（255,0,0）’）{
$（'p'）.css（'color'，'green'））
}否则{
$（'p'）.css（'color'，'red'））
}
})
}

将在这一段中尝试我的jquery

点击如果我在逗号后添加空格，它在Chrome中对我有效：
color='rgb（255，0，0）

由于不同的浏览器可能会为颜色返回不同的字符串，因此在这种情况下，最简单的方法可能是在设置后立即保存
.css（'color'）
返回的字符串，然后将
color
变量与之进行比较：


window.onload=function（）{
$（'p'）.css（'color'，'rgb（255,0,0'））；
var match_red=$（'p'）.css（'color'）；//保存以进行匹配
$（“#按钮”）。单击（函数（）{
颜色=$（'p'）.css（'color'）；
如果（颜色==匹配\红色）{
$（'p'）.css（'color'，'green'）；
}否则{
$（'p'）.css（'color'，'red'）；
}
})
}

将在这一段中尝试我的jquery

点击如果我在逗号后添加空格，它在Chrome中对我有效：
color='rgb（255，0，0）

由于不同的浏览器可能会为颜色返回不同的字符串，因此在这种情况下，最简单的方法可能是在设置后立即保存
.css（'color'）
返回的字符串，然后将
color
变量与之进行比较：


window.onload=function（）{
$（'p'）.css（'color'，'rgb（255,0,0'））；
var match_red=$（'p'）.css（'color'）；//保存以进行匹配
$（“#按钮”）。单击（函数（）{
颜色=$（'p'）.css（'color'）；
如果（颜色==匹配\红色）{
$（'p'）.css（'color'，'green'）；
}否则{
$（'p'）.css（'color'，'red'）；
}
})
}

将在这一段中尝试我的jquery

点击展开@ecasparello comment，您应该能够执行以下操作：

window.onload = function() {
  $('#button').click(function() {
    $('p').toggleClass("green red");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<p class="green">Will try my jquery in this paragraph</p>
<button type="button" id="button">Click!</button>

window.onload=function（）{
$（“#按钮”）。单击（函数（）{
$（'p'）.toggleClass（“绿-红”）；
});
});
将在本段中尝试我的jquery
点击
展开@ecasparello comment，您应该能够做到：

window.onload = function() {
  $('#button').click(function() {
    $('p').toggleClass("green red");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<p class="green">Will try my jquery in this paragraph</p>
<button type="button" id="button">Click!</button>

window.onload=function（）{
$（“#按钮”）。单击（函数（）{
$（'p'）.toggleClass（“绿-红”）；
});
});
将在本段中尝试我的jquery
点击
如前所述，您可以切换一个类

优点：通过这种方式，您可以切换更多的属性，而不仅仅是颜色。即字体大小、背景色、边框等

请参阅下面的演示


$（函数（）{
$（'p'）.addClass（'red'）；
$（'#按钮'）。在（'单击'，函数（）上）{
$（'p'）.toggleClass（'蓝红色'）；
});
});
.blue{
颜色：蓝色；
}
瑞德先生{
颜色：红色；
}

将在这一段中尝试我的jquery

点击如前所述，您可以切换一个类

优点：通过这种方式，您可以切换更多的属性，而不仅仅是颜色。即字体大小、背景色、边框等

请参阅下面的演示


$（函数（）{
$（'p'）.addClass（'red'）；
$（'#按钮'）。在（'单击'，函数（）上）{
$（'p'）.toggleClass（'蓝红色'）；
});
});
.blue{
颜色：蓝色；
}
瑞德先生{
颜色：红色；
}

将在这一段中尝试我的jquery

点击
console.log（color）
如果我在逗号后添加空格，它在Chrome中对我有效：
color=='rgb（255，0，0）
你最好切换一个类。
console.log（color）
如果我在逗号后添加空格，它在Chrome中对我有效：
color=='rgb（255，0，0）“
您最好只切换一个类。是的，这就是方法。我还将更频繁地使用控制台日志来输出变量值，以便在此类情况下进行故障排除-在我的测试中，
console.log（color）
输出了
rgb（255，0，0）
的值，一眼就可以看出这将无法通过对
rgb值的条件检查（255,0,0）
逗号后不带空格。是的，这是一种方法。为了在此类情况下进行故障排除，我还将更频繁地使用控制台日志输出变量值-在我的测试中，
console.log（color）
输出了
rgb（255,0,0）的值
一目了然地表明，这将无法通过对
rgb（255,0,0）
值的条件检查，逗号后没有空格。你赢了我：）你赢了我：）干净、容易看。干净、容易看。