Question

我想将 0 的投票数量替换为默认值，将 1 替换为upvote，将 -1 替换为< strong>未评级为默认值， 100％为upvote， 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>

使用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('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;
    }

Answer 1

您可以通过添加数组轻松解决此问题！

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以避免错误处理数组！

用Jquery upVote的百分比系统替换投票计数

1 个答案: