javascript - 又是this指向問題
给我你的怀抱
给我你的怀抱 2017-06-30 09:58:07
0
4
884

這是一個星星評分插件,用原生js寫的。將for(var k = 0)...這段抽出來時,然後執行到that.getStarPoint.call(this,point,active)這部分就不行了,這個this是指向star[ i],如何將star[i]和star[k]有相同的功能呢?

html: (星星暫時用色塊代替)

<!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;
        }
    }
}())
给我你的怀抱
给我你的怀抱

全部回覆(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

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)

.....

}

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!