我正在创建一个类似于stackoverflow的投票系统，但不是投票计数 0,1，-1。我想将其更改为未评级，0％ ，和100％。我怎样才能做到这一点？
这是以下教程： http://janosgyerik.github.io/jquery-upvote/
这是我的HTML：
<div class="examples" id="examples"></div>
<div id="templates" class="hidden">
<div class="upvote">
<a class="upvote" title="This is good stuff. Vote it up! (Click again to undo)"></a>
<span class="count" title="Total number of votes"></span>
<a class="downvote" title="This is not useful. Vote it down. (Click again to undo)"></a>
<div class="examples" id="examples"></div>
<div id="templates" class="hidden">
<div class="upvote">
<a class="upvote" title="This is good stuff. Vote it up! (Click again to undo)"></a>
<span class="count" title="Total number of votes"></span>
<a class="downvote" title="This is not useful. Vote it down. (Click again to undo)"></a>
我的javascript：
function gen(target, cssClass, params) {
var obj = $('#templates .upvote').clone();
obj.addClass(cssClass);
$(target).append(obj);
return obj.upvote(params);
}
$(function() {
function gen_examples(params) {
gen('#examples', '', params);
}
function gen_unix(params) {
gen('#unix', 'upvote-unix', params);
}
function gen_programmers(params) {
gen('#programmers', 'upvote-programmers', params);
}
function gen_serverfault(params) {
gen('#serverfault', 'upvote-serverfault', params);
}
var functions = [gen_examples, gen_unix, gen_programmers, gen_serverfault];
for (var i in functions) {
var fun = functions[i];
fun();
}
});
;(function($) {
"use strict";
var namespace = 'upvote';
var dot_namespace = '.' + namespace;
var upvote_css = 'upvote';
var dot_upvote_css = '.' + upvote_css;
var upvoted_css = 'upvote-on';
var dot_upvoted_css = '.' + upvoted_css;
var downvote_css = 'downvote';
var dot_downvote_css = '.' + downvote_css;
var downvoted_css = 'downvote-on';
var dot_downvoted_css = '.' + downvoted_css;
var star_css = 'star';
var dot_star_css = '.' + star_css;
var starred_css = 'star-on';
var dot_starred_css = '.' + starred_css;
var count_css = 'count';
var dot_count_css = '.' + count_css;
var enabled_css = 'upvote-enabled';
function init(dom, options) {
return dom.each(function() {
var jqdom = $(this);
methods.destroy(jqdom);
var count = parseInt(jqdom.find(dot_count_css).text(), 10);
count = isNaN(count) ? 0 : count;
var initial = {
id: jqdom.attr('data-id'),
count: count,
upvoted: jqdom.find(dot_upvoted_css).size(),
downvoted: jqdom.find(dot_downvoted_css).size(),
starred: jqdom.find(dot_starred_css).size(),
callback: function() {}
};
var data = $.extend(initial, options);
if (data.upvoted && data.downvoted) {
data.downvoted = false;
}
jqdom.data(namespace, data);
render(jqdom);
setupUI(jqdom);
});
}
function setupUI(jqdom) {
jqdom.find(dot_upvote_css).addClass(enabled_css);
jqdom.find(dot_downvote_css).addClass(enabled_css);
jqdom.find(dot_star_css).addClass(enabled_css);
jqdom.find(dot_upvote_css).on('click.' + namespace, function() {
jqdom.upvote('upvote');
});
jqdom.find('.downvote').on('click.' + namespace, function() {
jqdom.upvote('downvote');
});
jqdom.find('.star').on('click.' + namespace, function() {
jqdom.upvote('star');
});
}
function _click_upvote(jqdom) {
jqdom.find(dot_upvote_css).click();
}
function _click_downvote(jqdom) {
jqdom.find(dot_downvote_css).click();
}
function _click_star(jqdom) {
jqdom.find(dot_star_css).click();
}
function render(jqdom) {
var data = jqdom.data(namespace);
jqdom.find(dot_count_css).text(data.count);
if (data.upvoted) {
jqdom.find(dot_upvote_css).addClass(upvoted_css);
jqdom.find(dot_downvote_css).removeClass(downvoted_css);
} else if (data.downvoted) {
jqdom.find(dot_upvote_css).removeClass(upvoted_css);
jqdom.find(dot_downvote_css).addClass(downvoted_css);
} else {
jqdom.find(dot_upvote_css).removeClass(upvoted_css);
jqdom.find(dot_downvote_css).removeClass(downvoted_css);
}
if (data.starred) {
jqdom.find(dot_star_css).addClass(starred_css);
} else {
jqdom.find(dot_star_css).removeClass(starred_css);
}
}
function callback(jqdom) {
var data = jqdom.data(namespace);
data.callback(data);
}
function upvote(jqdom) {
var data = jqdom.data(namespace);
if (data.upvoted) {
data.upvoted = false;
--data.count;
} else {
data.upvoted = true;
++data.count;
if (data.downvoted) {
data.downvoted = false;
++data.count;
}
}
render(jqdom);
callback(jqdom);
return jqdom;
}
function downvote(jqdom) {
var data = jqdom.data(namespace);
if (data.downvoted) {
data.downvoted = false;
++data.count;
} else {
data.downvoted = true;
--data.count;
if (data.upvoted) {
data.upvoted = false;
--data.count;
}
}
render(jqdom);
callback(jqdom);
return jqdom;
}
function star(jqdom) {
var data = jqdom.data(namespace);
data.starred = ! data.starred;
render(jqdom);
callback(jqdom);
return jqdom;
}
function count(jqdom) {
return jqdom.data(namespace).count;
}
function upvoted(jqdom) {
return jqdom.data(namespace).upvoted;
}
function downvoted(jqdom) {
return jqdom.data(namespace).downvoted;
}
function starred(jqdom) {
return jqdom.data(namespace).starred;
}
var methods = {
init: init,
count: count,
upvote: upvote,
upvoted: upvoted,
downvote: downvote,
downvoted: downvoted,
starred: starred,
star: star,
_click_upvote: _click_upvote,
_click_downvote: _click_downvote,
_click_star: _click_star,
destroy: destroy
};
function destroy(jqdom) {
return jqdom.each(function() {
$(window).unbind(dot_namespace);
$(this).removeClass(enabled_css);
$(this).removeData(namespace);
});
}
$.fn.upvote = function(method) {
var args;
if (methods[method]) {
args = Array.prototype.slice.call(arguments, 1);
args.unshift(this);
return methods[method].apply(this, args);
}
if (typeof method === 'object' || ! method) {
args = Array.prototype.slice.call(arguments);
args.unshift(this);
return methods.init.apply(this, args);
}
$.error('Method ' + method + ' does not exist on jQuery.upvote');
};
})(jQuery);
最后是css：
.hidden {
display: none;
}
.examples {
overflow: auto;
}
.examples div.upvote {
float: left;
}
div.upvote {
text-align: center;
}
div.upvote a.upvote-enabled {
cursor: pointer;
}
div.upvote a {
color: transparent;
background-image: url('images/sprites-stackoverflow.png?v=1');
background-repeat: no-repeat;
overflow: hidden;
display: block;
margin: 0 auto;
width: 41px;
height: 25px;
}
div.upvote span.count {
display: block;
font-size: 24px;
font-family: Arial, Liberation, Sans, DejaVu Sans, sans-serif;
color: #555;
text-align: center;
line-height: 1;
}
div.upvote a.upvote {
background-position: 0px -265px;
}
div.upvote a.upvote.upvote-on {
background-position: 0px -230px;
}
div.upvote a.downvote {
background-position: 0px -300px;
}
div.upvote a.downvote.downvote-on {
background-position: 0px -330px;
}
div.upvote-serverfault a {
background-image: url('images/sprites-serverfault.png?v=1');
}
div.upvote-meta-stackoverflow a {
background-image: url('images/sprites-meta-stackoverflow.png?v=1');
}
div.upvote-superuser a {
background-image: url('images/sprites-superuser.png?v=1');
}
div.upvote-unix a {
background-image: url('images/sprites-unix.png?v=1');
width: 42px;
height: 27px;
}
div.upvote-unix a.upvote {
background-position: 0px -237px;
}
div.upvote-unix a.upvote.upvote-on {
background-position: 0px -198px;
}
div.upvote-unix a.downvote {
background-position: 0px -281px;
}
div.upvote-unix a.downvote.downvote-on {
background-position: 0px -319px;
}
div.upvote-unix a.star {
width: 42px;
height: 30px;
background-position: 0px -126px;
}
div.upvote-unix a.star.star-on {
background-position: 0px -164px;
}
div.upvote-unix span.count {
color: #333;
line-height: 15px;
padding: 9px 0;
font-family: "DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",Courier,Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter",monospace;
text-shadow: 1px 1px 0 #ffffff;
font-weight: bold;
margin: 0;
border: 0;
vertical-align: baseline;
}
div.upvote-programmers a {
background-image: url('images/sprites-programmers.png?v=1');
width: 42px;
height: 20px;
}
div.upvote-programmers a.upvote {
background-position: 5px -248px;
}
div.upvote-programmers a.upvote.upvote-on {
background-position: 5px -211px;
}
div.upvote-programmers a.downvote {
background-position: 5px -282px;
}
div.upvote-programmers a.downvote.downvote-on {
background-position: 5px -320px;
}
div.upvote-programmers a.star {
width: 42px;
height: 30px;
background-position: 6px -128px;
}
div.upvote-programmers a.star.star-on {
background-position: 6px -166px;
}
div.upvote-programmers span.count {
color: #333;
line-height: 15px;
padding: 5px 0 7px;
font-size: 20px;
font-weight: bold;
font-family: Tahoma,Geneva,Arial,sans-serif;
}