使用jquery的事件代理模拟实现美团点赞功能

1、需求：使用jquery的事件代理模拟实现美团点赞功能
2.jQuery版本：jquery-1.11.3.js
3、样式以及html代码如下：
3.1 样式如下：

3.2 html如下：

4.实现过程：获得当前单击的li在所有li中的位置index,index及其执行的都变为红色，index之后的都变为白色
4.1、实现方式1，使用jQuery事件代理实现如下：

$(".score").click(function(e) {
var $li = $(e.target);
//判断如果此次点击事件是执行在li上则往下执行，否则当点击ul的其他区域导致事件向下捕获占据第一个li的位置，
// 导致li的下标获取不正确，致使下面的操作都发生错误。
if ($li.is("li")) { 
$li.css("background","red");
var $index = $li.index();
console.log($index,"$index");
$(`ul>li:lt(${$index})`).css("background","red");
$(`ul>li:gt(${$index})`).css("background","#fff");
}})

4.2、实现方式2：通过jQuery简化的事件绑定事件.on来实现。
$(父元素).on(“事件名”,“选择器”,function(){})，其中on拿走了选择器，相当于执行了this=e.target，来自动判断操作的元素是否正确，不需要我们写if判断了。
并且this–>e.target，不用通过e.target来绑定是否是当前操作元素。
实现如下：

$("ul").on("click","li", function() {
var $li = $(this);
// 设置当前点击的li的背景颜色
$li.css("background","red");
// 获取当前点击的li的下标
// var $index = $("ul>li").index($li);
var $index = $li.index(); //同上，简写方式
// 当下标小于当前li的下标，则显示红色
$(`ul>li:lt(${$index})`).css("background","red");
// 当下标大于当前li的下标，则显示白色
$(`ul>li:gt(${$index})`).css("background","#fff");

})

4.3实现效果如图：

5.总结：显然通过.on来实现事件委托/事件代理帮我们省掉了一些判断操作，并将this重新返还给我们了，不需要 用e.target，只需要直接写正常的事件处理逻辑。
1. on拿走了选择器，自动判断，咱们不用再写if
2. this->e.target，不用写e和e.target
6.说明：转载请注明出处。