jquery仿element实现评分

详细说明

看到element里面有一个很不错的星星评分组件，很实用；突然感觉自己也可以来实现一个超简单的星星评分。 当然不需要像element那么多的功能，不需要那么的复杂，只需要出现星星点亮的那个样式就可以了。页面也不需要太多的元素，只需要画上小星星就可以了，一般评分都是五分、十分这样子的，这里就大方点，给十个星星吧。首先html代码里加个ul标签就可以，用来作为星星的容器。

<ul id="stars"></ul> 

星星就写在li标签里面，页面上html代码中也没有li标签，这里我们可以使用js创建进去，毕竟10个说多不多，说少不少，js创建元素就刚刚好。需要10个li标签，就循环创建10次，创建之后，这里也不需要额外添加样式代码，只需要将“☆”符号添加到li标签里，当做文本。然后再将创建的li标签append到ul标签里面。 代码实现：

addElement();
function addElement() {for( let i=0; i<=10; i++) {let el = document.createElement('li');el.innerHTML = '☆';$("#stars").append(el);}
} 

到了这一步，10个星星就可以显示出来了，还差重点的一步：当鼠标划到某个星星时，它自己以及前面的星星都需要高亮。在jquery里面有这样的方法，prevAll():找到本身前面的所有兄弟元素（包括自己本身），nextAll()找本身后面的所有元素（包括自己本身），这样当划到某一个星星时，就可以将其本身和前面所有的兄弟元素都高亮（改变颜色，替换实体字符），而后面的所有兄弟元素都去除高亮。代码实现：

$("li").on("mouseover", function() {$(this).css("color", "yellow").html("★");$(this).prevAll().css("color", "yellow").html('★');$(this).nextAll().css("color", "#ccc").html("☆");
}) 

最后

整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。

有需要的小伙伴，可以点击下方卡片领取，无偿分享