1

在 Stackoverflow 网站上，如果用户没有投票，投票箭头最初可以是“vote-up-off”/“vote-down-off”。如果用户之前投票，它也可以是一个向上/另一个向下。从这3个案例开始，当用户点击时，我想切换类。在这个网站上好心人的帮助下，到目前为止我得到了这段代码：

if($("a.vote-up-down").hasClass("vote-up-on")){
    $(".vote-up-on").removeClass("vote-up-on").addClass("vote-up-off");
    $(".vote-down-off").removeClass("vote-down-off").addClass("vote-down-on");
}
else if($("a.vote-up-down").hasClass("vote-down-on")){
    $(".vote-down-on").removeClass("vote-down-on").addClass("vote-down-off");
    $(".vote-up-off").removeClass("vote-up-off").addClass("vote-up-on");
}

如果您在已经投票支持时不再次单击向上箭头，或者在已经投票反对时不再次单击向下箭头，则此方法有效。否则，它会不断切换而忽略实际投票。如果最初两个箭头都关闭，则此代码将同时更改。在我的 ajax 函数中，我可以提供实际投票值（1 或 -1）的响应消息，如何更正上述代码？

4

2 回答 2

3

如果你不使用vote-up-on和vote-down-on作为不同的类名，整个事情会更容易。只需切换一类on：http: //jsfiddle.net/ghSEb/。

$(".vote").on("click", function() {
    $(".vote").not(this).removeClass("on");  // make sure to remove other vote
    $(this).toggleClass("on");​​​​​​​​​               // switch this one
});
于 2012-08-22T22:59:06.437 回答
2

使用.toggleClass()内部的条件

var $voteDown = $("a.vote-up-down");
$(".vote-up-on").toggleClass('vote-up-off',$voteDown.hasClass("vote-up-off"))
$(".vote-up-off").toggleClass('vote-up-on',$voteDown.hasClass("vote-up-on"))
于 2012-08-22T22:59:56.717 回答