This is a star rating plug-in, written in native js. When you extract the for(var k = 0)... section and then execute it to that.getStarPoint.call(this, point, active), this part will not work. This this points to star[ i], how can star[i] and star[k] have the same effect?
html: (The stars are temporarily replaced by color blocks)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>星星评分插件</title>
<meta name="renderer" content="ie-webkit">
<style>
.star{
margin-top: 10px;
}
.star span, .star em{
display: inline-block;
vertical-align: top;
}
.star span{
cursor: pointer;
width: 16px;
height: 16px;
background: #eee;
}
.star span.active{
background: #333;
}
</style>
</head>
<body>
<!-- 建议放评分的盒子也放在同一个盒子里面并且与星星的标签不一样，这样方面dom查找 -->
<!-- 星星可以是图片，也可以放在css里面 -->
<p class="star">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<em class="star-point"></em>
</p>
</body>
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript">
new Star('.star');
</script>
</html>
js:
;(function(global,undefined){
'use strict'
var _global;
function Star(options){
this.defaultOptions = {
starBox: '.star', //装星星的obj
starActive: 'active', //鼠标移上去的样式
starPoint: '.star-point' //星星评分
};
this.opt = this.extend(this.defaultOptions, options || {} || '');
this.star = this.getElem(this.opt.starBox).getElementsByTagName('span');
this.len = this.star.length;
this.init(options);
}
Star.prototype = {
constructor: this,
init: function(options){
var that = this;
var starBox = that.getElem(that.opt.starBox),
starPoint = that.getElem(that.opt.starPoint),
active = that.opt.starActive,
star = starBox.getElementsByTagName('span'),
point = 0;
for(var i = 0; i<this.len; i++){
star[i].index = i;
star[i].onmouseover = function(){
that.clearAllStar.call(this);
/*for(var k = 0; k<this.len; k++){
star[k].className = '';
}*/
for(var j = 0; j<this.index + 1; j++){
star[j].className = active; //经过的就添加active类
}
}
star[i].onmouseout = function(){
for(var j = 0; j<this.index + 1; j++){
star[j].className = ''; //离开的就去掉active类
}
//公用部分
/*for(var k = 0; k<point; k++){
star[k].className = active;
}*/
that.getStarPoint.call(this,point,active);
}
star[i].onclick = function(){ //点击后的星星个数以及分数
point = this.index + 1;
starPoint.innerHTML = point + '分';
//公用部分
/*for(var k = 0; k<point; k++){
star[k].className = active;
}*/
that.getStarPoint.call(this,point,active);
}
}
},
clearAllStar: function(){ //清理所有hover过的星星
for(var k = 0; k<this.len; k++){
this.className = '';
}
},
getStarPoint: function(point,active){ //获取评分
for(var k = 0; k<point; k++){
this.className = active;
}
},
getElem: function(obj){ //获取dom元素
return document.querySelector(obj);
},
extend: function(source,value){ //拓展参数的函数
for(var i in value){
if(value.hasOwnProperty(i)){
source[i] = value[i];
}
}
return source;
}
}
}())
女神的闺蜜爱上我2017-06-30 10:00:07
It feels like tying this to getStarPoint() doesn’t make much sense, because in addition to the current element, all previous elements must be set to active. It’s better to loop and then star[k].className = active;
为情所困2017-06-30 10:00:07
I think you should use that as the context of getStarPoint, writing that.getStarPoint.call(that, point, active);, where that is the Star instance.
阿神2017-06-30 10:00:07
Pass the str array. getStarPoint is a pure loop operation and has no requirements on what this is.
欧阳克2017-06-30 10:00:07
I don’t quite understand what you mean by “star[i] and star[k] have the same effect”. If onmouseover knows which star it is, it can use closure to pass i:
for(var i = 0; i<this.len; i++) {
star[i].index = i;
star[i].onmouseover = (function(i) {
return function(){
that.clearAllStar.call(this);
/*for(var k = 0; k<this.len; k++){
star[k].className = '';
}*/
for(var j = 0; j<this.index + 1; j++){
star[j].className = active; //经过的就添加active类
}
}
})(i)
.....
}