星级评分原理和实现（上）_技术笔记

游览车 2021-11-08

事件委托，子节点委托到父节点上去。
$rating.on('click','.rating-item',function(){
//…………
});

0赞 · 0采集
RelaxLearning 2020-07-21

事件委托，子元素的事件委托给父元素处理

截图
0赞 · 1采集

慕粉2466386 2019-08-09

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>星级评分-第一种实现方式</title>
    <style type="text/css">
 *{/*清除内外边距*/
 padding:0;
 margin:0;
 }

 ul li{/*清除列表样式*/
 list-style-type: none;
 }

 .rating{
 width: 350px;
 height:70px;
 margin:100px auto;
 overflow:hidden;
 }
 .rating-item{
 /*position: fixed;*/
 width:70px;
 height:70px;
 background:url("images/star.png")no-repeat;
 cursor: pointer;
 /*!**!  background-position: 0 -65px;*/
 float:left;
 /*overflow: hidden;*/
 }
    </style>
</head>
<body>
<!--ctrl+/  单行注释-->
<!--块注释 ctrl+shift+/-->
<!--ctrl+shift+up 代码拖动-->
<ul class="rating" id="rating">
    <li class="rating-item" title="很不好"></li>
    <li class="rating-item" title="不好"></li>
    <li class="rating-item" title="一般"></li>
    <li class="rating-item" title="好"></li>
    <li class="rating-item" title="很好"></li>
</ul>
<ul class="rating" id="rating2">
    <li class="rating-item" title="很不好"></li>
    <li class="rating-item" title="不好"></li>
    <li class="rating-item" title="一般"></li>
    <li class="rating-item" title="好"></li>
    <li class="rating-item" title="很好"></li>
</ul>

<ul class="rating" id="rating3">
    <li class="rating-item" title="很不好"></li>
    <li class="rating-item" title="不好"></li>
    <li class="rating-item" title="一般"></li>
    <li class="rating-item" title="好"></li>
    <li class="rating-item" title="很好"></li>
</ul>

<ul class="rating" id="rating4">
    <li class="rating-item" title="很不好"></li>
    <li class="rating-item" title="不好"></li>
    <li class="rating-item" title="一般"></li>
    <li class="rating-item" title="好"></li>
    <li class="rating-item" title="很好"></li>
</ul>

<ul class="rating" id="rating5">
    <li class="rating-item" title="很不好"></li>
    <li class="rating-item" title="不好"></li>
    <li class="rating-item" title="一般"></li>
    <li class="rating-item" title="好"></li>
    <li class="rating-item" title="很好"></li>
</ul>


<!--js文件放最后为防止找不到节点，同时不会阻塞页面-->
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">

 var rating = (function () {
 //点亮星星
 var lightOn = function($item,num) {
 //num是要点亮的星星数
 $item.each(function(index) {
 if(index < num) {
 $(this).css("background-position", "0 -65px");
 } else {
 $(this).css("background-position", "0 0");

 }

            });

 };

        var init = function (el,num) {
 var $rating = $(el), $item = $rating.find(".rating-item");

 lightOn($item,num);
 //事件绑定
 $rating.on('mouseover','.rating-item',function(){
 //鼠标移上去所指星星亮起
 lightOn($item,$(this).index()+1);
 }).on('click','.rating-item',function(){
 num=$(this).index()+1;
 //此时num改变为当前点击的星星数
 }).on('mouseout',function(){
 lightOn($item,num);

 });

 };

 //插件
 $.fn.extend({
 rating:function (num) {
 return this.each(function(){
 init(this,num);
 });

 }
        });

        return{
 init:init
 };
 //初始化

 })();
 //   rating.init('#rating',2);
//    rating.init('#rating2',3);
 $('#rating').rating(1);
 $('#rating2').rating(2);
 $('#rating3').rating(3);
 $('#rating4').rating(4);
 $('#rating5').rating(5);

</script>
</body>
</html>

0赞 · 0采集

Mky1105 2018-08-23

根据老师的思路指导，用原生写出来的，没有学jq，终于实现了
function getByClassname(obj,sclass){
obj=obj||document;
var arrname=[];
var arrname2=[];
if(obj.getElementsByClassName){
return obj.getElementsByClassName(sclass);
}else{
arrname=obj.getElementsByTagName('*');
for(var i=0;i<arrname.length;i++){
var a=arrname[i].className.split(' ');
for(var j=0;i<a.length;j++){
if(a[i]==sclass){
return arrname2.push(arrname[i]);
}
}
}
}
}
var rating= (function(){
//点亮方法
var init=function (obj,sclass,num){//构造函数

var oUl=document.getElementById(obj);
var aLi=getByClassname(oUl,sclass);
//初始化
show(num);
//事件绑定
oUl.onmousemove=function(ev){
var Ev=ev||window.event;
var target=Ev.target||Ev.srcElement;// target是ev带的属性，srcElement是IE兼容写法
if(target.nodeName.toLowerCase()=="li")//判断发生事件target的属性名称是什么，target的返回值是大写的，所以要转换成效小写
show(target.index+1);
}
oUl.onmouseout=function(ev){
show(num);
}
oUl.onclick=function(ev){
var Ev=ev||window.event;
var target=Ev.target||Ev.srcElement;// target是ev带的属性，srcElement是IE兼容写法
if(target.nodeName.toLowerCase()=="li")//判断发生事件target的属性名称是什么，target的返回值是大写的，所以要转换成效小写
num=target.index+1;
}
function show(num){
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
if(aLi[i].index<num){
aLi[i].style.backgroundPosition='0 -25px';
}else{
aLi[i].style.backgroundPosition='0 0';
}
}
}

}
return {
init:init
}
})();

rating.init('ul1','raing-item',3);
rating.init('ul2','raing-item',1);

0赞 · 0采集
benbenchen 2018-02-25

将代码封装在立即执行函数中（避免全部变量），立即执行函数return一个对象（这个对象中包含需要给外界使用的属性或者方法）给一个变量，通过这个变量就可以调用封装好的方法了

截图
0赞 · 0采集
weibo_苏打小Q_0 2017-11-24

整理下js的思路：写好主功能函数，就是点亮这个函数-->为元素一一绑定事件为元素绑定事件有个小细节：mouseout事件绑定在ul这个父容器上，而不是li单个项目上。完善：全局变量重名或者冲突，解决方法：自我匿名函数，就是用一个闭包不用为每个li都绑定事件，只需要为他们父容器绑定即可，利用事件的冒泡处理 $rating.on('mouseover','.rating-item',function(){}，子元素事件委托给父元素处理为了实现功能复用，我们可以把它写成一个模块，可以用函数来实现，利用函数带参实现不同需求；命名为init函数，怎么使用呢？就可以用return返回来使用，而return返回对象的话就可以这样使用：rating.init("#el",num) 这里有个小细节：功能函数例如lightOn因为只需要申明一次就可以把它放到init函数外面。

2赞 · 3采集
qq_沉淀中_0 2017-10-31

封装插件

0赞 · 0采集
qq_珂壳可克_03751673 2017-08-14

整理下js的思路：写好主功能函数，就是点亮这个函数-->为元素一一绑定事件为元素绑定事件有个小细节：mouseout事件绑定在ul这个父容器上，而不是li单个项目上。完善：全局变量重名或者冲突，解决方法：自我匿名函数，就是用一个闭包不用为每个li都绑定事件，只需要为他们父容器绑定即可，利用事件的冒泡处理 $rating.on('mouseover','.rating-item',function(){}，子元素事件委托给父元素处理为了实现功能复用，我们可以把它写成一个模块，可以用函数来实现，利用函数带参实现不同需求；命名为init函数，怎么使用呢？就可以用return返回来使用，而return返回对象的话就可以这样使用：rating.init("#el",num) 这里有个小细节：功能函数例如lightOn因为只需要申明一次就可以把它放到init函数外面。

1赞 · 4采集
慕瓜5189485 2017-08-09

var rating = (function() { var lightOn = function(item, num) { item.each(function(index) { if(index < num) { $(this).css("background-position", "0 -36px"); } else { $(this).css("background-position", "0 0"); } }) } var init = function(el, num) { var rating = $(el); var item = rating.find(".rating-item"); //初始化 lightOn(item, num); //事件委托子元素事件(.rating-item)委托给父元素(rating)处理 rating.on("mouseover", ".rating-item", function() { lightOn(item, $(this).index() + 1); }).on("click", ".rating-item", function() { num = $(this).index() + 1; }).on("mouseout", function() { //事件绑定 lightOn(item, num); }) } //jQuery插件 $.fn.extend({ rating: function(num) { return this.each(function() { init(this, num); }) } }) return { init: init } })() //方法 //rating.init("#rating",2); //插件 $("#rating").rating(2);

5赞 · 4采集
budflower 2017-06-27

事件委托就是将子元素的事件委托给父元素

0赞 · 1采集
梦想还是要有的万一实现了呢 2017-06-22

变成插件这块暂时搁置

0赞 · 2采集
zhangyudemuke 2017-06-03

利用闭包实现命名空间

截图
0赞 · 0采集

数据加载中...