javascript - 又是this指向问题
给我你的怀抱
给我你的怀抱 2017-06-30 09:58:07
[JavaScript讨论组]

这是一个星星评分插件,用原生js写的。将for(var k = 0)...这一段抽出来时,然后执行到that.getStarPoint.call(this,point,active)这部分就不行了,这个this是指向star[i],如何将star[i]和star[k]有相同的作用呢?

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
给我你的怀抱
给我你的怀抱

全部回复(4)
女神的闺蜜爱上我

感觉把 this 绑到 getStarPoint() 意义不大,因为除了当前元素,还有前面的元素都要置为 active,不如就 循环然后 star[k].className = active;

为情所困

我觉得,你应该将that作为getStarPoint的上下文,写作that.getStarPoint.call(that, point, active);,此处that才是Star实例。

阿神

把str数组传过去呗,getStarPoint 这个对纯粹的循环操作 ,对this是啥并无要求。

欧阳克

不太理解你说的 “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)

.....

}

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号