- Gemeinschaft
- Lernen
- Tools-Bibliothek
- Freizeit
Heim > Fragen und Antworten > Hauptteil
Dies ist ein Sternebewertungs-Plug-in, geschrieben in nativem JS. Wenn der Abschnitt for(var k = 0)... extrahiert und dann im Abschnitt that.getStarPoint.call(this,point,active) ausgeführt wird, funktioniert dies nicht. Dies zeigt auf star[i], wie man star[i] und star[k] erstellt. habe das gleiche Was ist die Rolle?
html: (Die Sterne werden vorübergehend durch Farbblöcke ersetzt)
<!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
感觉把 this 绑到 getStarPoint() 意义不大，因为除了当前元素，还有前面的元素都要置为 active，不如就 循环然后 star[k].className = active;
为情所困2017-06-30 10:00:07
我觉得，你应该将that作为getStarPoint的上下文，写作that.getStarPoint.call(that, point, active);，此处that才是Star实例。
欧阳克2017-06-30 10:00:07
不太理解你说的 “star[i]和star[k]有相同的作用”， 是什么意思。如果onmouseover 知道自己是哪一个star，可以用闭包把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)
.....
}