0

投票を処理するプロトタイプ コードがあります。矢印をクリックすると、JavaScript/Prototype コードが正しく処理します。

私の問題は、タブのあるサイトを持っていて、同じ記事の同じ投票フォームが同じページに 2 回以上表示される可能性があることです。スクリプトは 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 がインスタンスに対して一意であることを確認してください。

tab1classと idsを持つページに新しい一連のフォームを追加しtab1up{{ main.id }}、tab1down{{ main.id}}

于 2013-01-27T06:55:56.780 に答える