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; //經(jīng)過的就添加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(){ //點擊后的星星個數(shù)以及分數(shù)
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){ //拓展參數(shù)的函數(shù)
for(var i in value){
if(value.hasOwnProperty(i)){
source[i] = value[i];
}
}
return source;
}
}
}())
4
0
0
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;
I think you should use that as the context of getStarPoint, writing that.getStarPoint.call(that, point, active);, where that is the Star instance.
Pass the str array. getStarPoint is a pure loop operation and has no requirements on what this is.
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; //經(jīng)過的就添加active類
}
}
})(i)
.....
}
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
