javascript - 如何抽象地实现JavaScript

Question

我正在寻求构建一个简单的排名系统，其中 div 是动态生成的，因此可能有几个或几百个，并且每个 div 都可以向上或向下排名。我让它适用于 1，但我不确定如何在更大的范围内做到这一点，其中每个 div 都有一个唯一的 id。

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);
});

Answer 1

在 JQuery 中执行此操作的最简单方法是在该排名 div 上也添加 class="rank"。然后，由于您在单击按钮处理程序中获取了发件人(您只需将签名更改为 $('.up').click(function(eventObject){ ... })) 您可以搜索下一个具有 .rank 类的元素。

综上所述，我强烈建议您放弃这种方法(因为它确实很容易出错)，而不是自己构建组件，而是花时间学习 AngularJs 这样的东西。

如果你想研究 AngularJS，请看看这个问题 - How to master AngularJS?

编辑:感谢您的反对...我正忙着在 JsFiddle 中制作示例:

http://jsfiddle.net/7zrej/