如何抽象地實現JavaScript

我期待構建一個簡單的排名系統，其中div是動態生成的，因此可能會有幾個或幾百個，並且每個div可以排列起來或向下排列。我有它爲1工作，但我不知道如何在更大的規模上做每個div有一個唯一的ID。如何抽象地實現JavaScript

HTML

<button class="up">Up</button> 
<button class="down">Dowm</button> 

<div id="rank">Rank = 0</div>

的JavaScript

var rank = 0; 
var rankPercent = 0; 
var rankTotal = 0; 

$('.up').click(function(){ 
    rank++; 
    rankTotal++; 
    rankPercent = rank/rankTotal; 
    $('#rank').text("Rank = "+ rankPercent); 
}); 

$('.down').click(function(){ 
    rankTotal++; 
    rankPercent = rank/rankTotal; 
    $('#rank').text("Rank = "+ rankPercent); 
});

來源

2014-04-08 MVC_Future_Guru

排名總共做了什麼？並排名百分比？你能否詳細說明一下？ – Michal

rankTotal是投票的總數，而rankPercent顯示了投票的百分比，所以2票總票數中有1票贊成等於50％贊成，或者選擇了。 –

內JQuery的最簡單的方法是對排名有DIV CLASS = 「等級」也。然後，因爲你在點擊按鈕處理得到發送者（你只需要改變簽名$('.up').click(function(eventObject){ ... }))你可以搜索具有.rank類下一個元素。

這一切都這樣說，我強烈建議你放棄這種方法（因爲它真的容易出錯）和代替建築構件自己，花時間在學習像AngularJs

，如果你想看看AngularJS看看這個問題 - How to master AngularJS?

編輯：謝謝你的downvote。 ..我正忙於在JsFiddle中做例子：

http://jsfiddle.net/7zrej/

來源

2014-04-08 22:11:26 kape123

我聽說過角度，但沒有做太多的事情。看了一會之後，它似乎很有幫助，但我認爲在未來幾天你可能會打破我的大腦。我找到了一個關於thinkster.io的教程，看起來與我期望完成的任務非常接近，除了我似乎完全失去了只是讓我的環境設置。它只是要求我通過我的終端進行安裝，所以我下載了node.js，運行了看起來像命令行的東西，但它說要使用我的普通shell。想想我將不得不閱讀更多 - 但是，謝謝你的建議 –

我不知道爲什麼其中任何一個被低估，我認爲它們都很棒。 –

@MVC_Future_Guru我知道跳進AngularJS可能看起來很難 - 但是相信我，在利用數據綁定的力量之後，你會在那一週回來，而不是試圖用jQuery或純JavaScript來做同樣的事情。這裏是在3天內教給我AngularJS的教程：http://www.thinkster.io/angularjs/GtaQ0oMGIl/a-better-way-to-learn-angularjs。如果您還需要提高您的Javascript知識，請從此開始並跟進觀看其他部分：http://yuiblog.com/blog/2007/01/24/video-crockford-tjpl/ – kape123

認爲它有點不同。創建一個upshift()和downshift()函數，其中節點以高於或低於它的任何值排序（或者，如果下面沒有任何東西，則不執行任何操作）。

所以，

function upshift (node) { 
    var nodeAbove = getNodeAbove(node); 
    if (nodeAbove) swapRanks(node, nodeAbove); 
    return node; 
} 

function downshift (node) { 
    var nodeBelow = getNodeBelow(node); 
    if (nodeBelow) swapRanks(node, nodeBelow); 
    return node; 
}

作爲一個方面的事情，也許是考慮以更加面向對象的方法這樣做：

var ranks = []; 

function Node (node_id) { 
    var node = this; 
    ranks.push(node); 
    node.rank = ranks.length-1; 
} 

Node.prototype.upshift = function upshift() {}; 
Node.prototype.downshift = function upshift() {}; 

var n1 = new Node(), 
    n2 = new Node(), 
    n3 = new Node();

來源

2014-04-08 22:15:39 ChaseMoskal

你可能已經迷失了我，我首先用對象風格的方法開始，但後來切換。感謝你的想法，這裏的每個人都非常有幫助，我覺得我只是爲了理解這個問題而花了一個星期的工作。 –

@MVC_Future_Guru：「我覺得我只是爲了理解這個問題而花了一週的時間。」 - 哦，遠遠超過我的朋友：這些概念你會延續多年！ ;）不用擔心，按照您的方式繼續您的項目，並且組織良好的程序代碼（沒有太多錯誤），考慮我的升班/降班方式來查看問題，並將建議保存在您的爲您的下一個項目（或實驗，最好;） – ChaseMoskal

將做，再次感謝。我的印象是我永遠不會完全理解，只是希望改進和跟上。好時光 –

一個多種方式將利用data attributes保持您的元素本身的排名數據。您可以在生成每個div時爲其生成唯一的ID，並將它們放入按鈕的數據屬性中。

你的初始數據屬性的HTML可能是這樣的：

<button class="up" data-id="0">Up</button> 
<button class="down" data-id="0">Down</button> 
<div id="rank-0" data-rank="0">0</div> 

<button class="up" data-id="1">Up</button> 
<button class="down" data-id="1">Down</button> 
<div id="rank-1" data-rank="0">0</div> 

<button class="up" data-id="2">Up</button> 
<button class="down" data-id="2">Down</button> 
<div id="rank-2" data-rank="0">0</div>

而JavaScript是這樣的：

$(".up").click(function() { 
    var id = $(this).data("id"); 
    var rank = $("#rank-" + id).data("rank"); 
    rank++; 
    $("#rank-" + id).data("rank", rank).text(rank); 
}); 

$(".down").click(function() { 
    var id = $(this).data("id"); 
    var rank = $("#rank-" + id).data("rank"); 
    rank--; 
    $("#rank-" + id).data("rank", rank).text(rank); 
});

Live example

來源

2014-04-08 22:15:48

感謝您採用這種方法，我認爲它填補了我一直存在的一些漏洞。一般來說，我仍然對JavaScript不熟悉，似乎有幾種方式或數千種方法可以完成。再次感謝。 –

我寫了一個較長的答案但如果你能夠更詳細地描述你正在嘗試的是什麼樣的行爲，那將會很有幫助創建。

您是否期望div在排名變化時自己重新排序，以便它們始終按照排名最高排名最低的順序排列？

問題缺乏細節。

編輯：http://codepen.io/shawkdsn/pen/lojwb/

這個例子顯示與維護從最高評價的以最低可調行列元素的動態列表。

EDIT2：我應該補充一點，這個codepen示例是純粹的前端代碼（不完整的解決方案），任何真正的排名系統都需要與後端層集成。 Angular是探索的好選擇，並且相對容易拾取。

來源

2014-04-08 22:22:45 user1967