Question

在Stackoverflow网站上，投票箭头最初可以是“投票关闭”/“投票关闭”，如果用户尚未投票。如果用户之前投票，它也可以是一个上/下。从这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）的响应消息，如何更正上述代码？

Answer 1

如果不将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
});

Answer 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"))

javascript：切换一对班级

2 个答案: