Javascript 将投票计数替换为Jquery upVote的百分比系统

我想将默认投票的0、向上投票的1和向下投票的-1替换为默认投票的未评级的、向上投票的100%和向下投票的0%

注意：我需要在不进入服务器端的情况下完成这项工作，因此基本上是一个只涉及jquery、javascript、html和css的前端解决方案

这是小提琴：

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>

和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('http://janosgyerik.github.io/jquery-upvote/lib/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('http://janosgyerik.github.io/jquery-upvote/lib/images/sprites-serverfault.png?v=1');
    }

    div.upvote-meta-stackoverflow a {
        background-image: url('http://janosgyerik.github.io/jquery-upvote/lib/images/sprites-meta-stackoverflow.png?v=1');
    }

    div.upvote-superuser a {
        background-image: url('http://janosgyerik.github.io/jquery-upvote/lib/images/sprites-superuser.png?v=1');
    }

    div.upvote-unix a {
        background-image: url('http://janosgyerik.github.io/jquery-upvote/lib/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('http://janosgyerik.github.io/jquery-upvote/lib/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;
    }

---

您可以通过添加阵列轻松解决此问题

function render(jqdom) {
  ...
  var data = jqdom.data(namespace);
  // Values for votes
  var votes = ["100%", "Not Rated", "0%"]; 
    jqdom.find(dot_count_css).text(votes[data.count+1]);
    if (data.upvoted) {
  ...
}

---

为了避免错误处理数组，我增加了+1

我必须移除什么才能让它工作？你能把这个代码添加到小提琴的适当位置吗：我让它工作了。现在是否可以使用CSS设置未分级、0%和100%的样式？同样，当按下向下箭头时，它应该是0，向上应该是100。要反转顺序，您必须将100%与0%反转，因此类似：

var投票=[“0%”，“未评级”，“100%”。对于第一个答案，您希望具体执行什么？我希望能够使未分级、100%和0%字体稍微小一点，也许可以更改字体系列。无论如何，字体大小的更改可以在css中的div.upvote span.count下进行。无论如何，谢谢你。
function render(jqdom) {
  ...
  var data = jqdom.data(namespace);
  // Values for votes
  var votes = ["100%", "Not Rated", "0%"]; 
    jqdom.find(dot_count_css).text(votes[data.count+1]);
    if (data.upvoted) {
  ...
}