jQuery的一个变换class效果问题

[code="js"]
$(document).ready(function() {
$(".ball_r").click(
function(){
$(this).removeClass("ball_r");
$(this).addClass("ball_blue");
}
)
$(".ball_blue").click(
function(){
$(this).removeClass("ball_blue");
$(this).addClass("ball_r");
}
)
});
[/code]
意图就点击一次换一类（一共就两个类）,但是以上代码在未点击时还起作用，点击以后第二次点就没效果了，如何改进？
[b]问题补充：[/b]
ball_blue和ball_r就是一个是BACKGROUND是红色，一个是蓝色，如果是红的就变蓝，如果是蓝的就变红,第一次点击时有效，但改变以后的再点就无效了。
[b]问题补充：[/b]
用了上一站，火星的方法，浏览器直接挂掉。

那用更简单点的方法，这样就可以了：

[code="javascript"]
$(".ball_r").toggle(
function () {
$(this).addClass("ball_blue");
},
function () {
$(this).removeClass("ball_blue");
}
);
[/code]

需要回调一下：

[code="javascript"]
$(document).ready(function() {
ball_r_click();
ball_blue_click();
});

function ball_r_click() {
$(".ball_r").click(function() {
$(this).removeClass("ball_r");
$(this).addClass("ball_blue");
})
ball_blue_click();
}

function ball_blue_click() {
$(".ball_blue").click(function() {
$(this).removeClass("ball_blue");
$(this).addClass("ball_r");
});
ball_r_click();
}
[/code]

难道你试了我上面的代码不行？