简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Javascript – Ein weiteres Problem bei diesem Verweis
给我你的怀抱
给我你的怀抱 2017-06-30 09:58:07
0
4
853

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

Antworte allen(4)
女神的闺蜜爱上我
女神的闺蜜爱上我2017-06-30 10:00:07 4 Etage

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

Wie +0
Antwort hinzufügen
为情所困
为情所困2017-06-30 10:00:07 3 Etage

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

Wie +0
Antwort hinzufügen
阿神
阿神2017-06-30 10:00:07 2 Etage

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

Wie +0
Antwort hinzufügen
学霸
学霸2017-06-30 10:00:07 1 Etage

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

.....

}

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！