0

我有一个处理投票的原型代码。我单击箭头，JavaScript/原型代码正确处理它。

我现在的问题是我有一个带有标签的网站，并且同一篇文章的相同投票表格可能会在同一页面中显示两次或更多。由于脚本与 ID 一起使用，我遇到了问题。

我的问题是如何修改此代码以处理同一篇文章的相同投票表格在同一页面中可能不止一次？基本上我需要更新所有表单的属性。

原型代码：

//
// The VoteHijacker JS
//


var VoteHijacker = Class.create();
VoteHijacker.prototype =
{
    initialize: function(prefix)
    {
    console.log('this.prefix:' + this.prefix + ' prefix:' + prefix);
        this.prefix = prefix || "";
        this.registerEventHandlers();
    },

    registerEventHandlers: function()
    {
        $$("form." + this.prefix + "vote").each(function(form)
        {
            Event.observe(form, "submit", this.doVote.bindAsEventListener(this), false);
        }.bind(this));
    },

    doVote: function(e)
    {
        Event.stop(e);
        var form = Event.element(e);
        var id = /(\d+)$/.exec(form.id)[1];
        var action = /(up|down|clear)vote/.exec(form.action)[1];
        new Ajax.Request(form.action, {
            onComplete: VoteHijacker.processVoteResponse(this.prefix, id, action)
        });
    }
};

VoteHijacker.processVoteResponse = function(prefix, id, action)
{
    return function(transport)
    {
        var response = transport.responseText.evalJSON();
        if (response.success === true)
        {
            var upArrowType = "grey";
            var upFormAction = "up";
            var downArrowType = "grey";
            var downFormAction = "down";

            if (action == "up")
            {
                var upArrowType = "mod";
                var upFormAction = "clear";
            }
            else if (action == "down")
            {
                var downArrowType = "mod";
                var downFormAction = "clear";
            }

            VoteHijacker.updateArrow("up", prefix, id, upArrowType);
            VoteHijacker.updateArrow("down", prefix, id, downArrowType);
            VoteHijacker.updateFormAction("up", prefix, id, upFormAction);
            VoteHijacker.updateFormAction("down", prefix, id, downFormAction);
            VoteHijacker.updateScore(prefix, id, response.score);

        }
        else
        {
            alert("Erro a votar: " + response.error_message);
        }
    };
};

VoteHijacker.updateArrow = function(arrowType, prefix, id, state)
{
    var img = $(prefix + arrowType + "arrow" + id);
    var re = new RegExp("a" + arrowType + "(?:mod|grey)\\.png");
    img.src = img.src.replace(re, "a" + arrowType + state + ".png");
};

VoteHijacker.updateFormAction = function(formType, prefix, id, action)
{
    var form = $(prefix + formType + id);
    form.action = form.action.replace(/(?:up|down|clear)vote/, action + "vote");
};

VoteHijacker.updateScore = function(prefix, id, score)
{
    var scoreElement = $(prefix + "score" + id);
    scoreElement.innerHTML = score.score /*+ " point" + VoteHijacker.pluralize(score.score)*/;
    scoreElement.title = "after " + score.num_votes + " vote" + VoteHijacker.pluralize(score.num_votes);
};

VoteHijacker.pluralize = function(value)
{
    if (value != 1)
    {
        return "s";
    }
    return "";
};

的HTML：

<div class="upparrow">
    <form class="mainvote" id="mainup{{ main.id }}" action="/votarem/main/{{ main.id }}/{% if vote and vote.is_upvote %}clear{% else %}up{% endif %}vote?next=/" method="POST">
    <input type="image" id="mainuparrow{{ main.id }}" src="/media/images/aup{% if vote and vote.is_upvote %}mod{% else %}grey{% endif %}.png">
    </form>                             
</div>
<div class="actualvotes">
<span class="score" id="mainscore{{ main.id }}" title="depois de {{ score.num_votes|default:0 }} voto{{ score.num_votes|default:0|pluralize }}">
    {{ score.score|default:0 }}
</span>                                     
</div>
<div class="downarrow">
    <form class="mainvote" id="maindown{{ main.id }}" action="/votarem/main/{{ main.id }}/{% if vote and vote.is_downvote %}clear{% else %}down{% endif %}vote?next=/" method="POST">
        <input type="image" id="maindownarrow{{ main.id }}" src="/media/images/adown{% if vote and vote.is_downvote %}mod{% else %}grey{% endif %}.png">
    </form>                                 
</div>

关于我应该怎么做来处理上面暴露的问题的任何线索？

PS：对不起我的英语。

此致，

4

1 回答 1

0

看起来您可以创建VoteHijacker类的多个实例，您只需要确保表单 ID 不同并且单独的实例指向正确的表单。

我猜当您创建实例时，您会这样做

new VoteHijacker('main');

这很容易更改为指向不同的表单，只需确保新表单的类与不同的实例调用匹配，并且表单 id 是唯一的，例如

将一组新的表单添加到具有 classtab1和 ids的页面tab1up{{ main.id }}，tab1down{{ main.id}}

于 2013-01-27T06:55:56.780 回答