[jquery 提问] 实现一个 button 对同一个文字的两种颜色切换。

之前用的.css("color","十六进制")但是做判断的时候浏览器读出来的是 rgb （???,0,0 ）格式，所以我试图改成 hasclass 方法，但是也遇到了瓶颈，本人新手勿喷。
求大神提点代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webapp</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
if($("[id='cha']").hasClass("text2")){
$("[id='cha']").removeClass("text2").addClass("text3")
}
else ？？？
})
});
</script>
<style>
.text2{
color:#AA0000;
}
.text3{
color:#55BB00;
}
</style>
<p class="text1">hello world</p>
<p id="cha" class="text2">im guy</p>
<button type="button" >change
</button>
</body>
</html>

Journey1969

2017-03-06 11:52:18 +08:00

else 里面写 “ $("[id='cha']").removeClass("text3").addClass("text2") ” 不就能完成功能了吗？

另外提几点小建议：
1. style 标签应该放在<head></head>里面
2. script 标签最好放在<body></body>里的最后

xuexb

2017-03-06 12:27:46 +08:00

给个我的思路, 让按钮的默认颜色是 a, 添加个 class 颜色是 b, 在点击时使用 toggleClass('b')来切换颜色, 岂不是很方便?

wenxiang0207

2017-03-06 13:42:14 +08:00

@xuexb <body>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("[class='text2']").toggleClass("text3")
})
});
</script>
<style>
.text2{
color:#AA0000;
}
.text3{
color:#55BB00;
}
</style>
<p class="text1">hello world</p>
<p class="text2">im guy</p>
<button type="button" >change
</button>
</body>
我试图这样写，但是只能切换一次，再也切不回来了

ren2881971

2017-03-06 13:59:34 +08:00

难道不应该用 jquery 的 toggle 来实现么。。不就是点击按钮然后切换同一个 dom 中字体的两种颜色么。。

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/345252

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.