简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Satu lagi masalah dengan penunjuk ini
给我你的怀抱
给我你的怀抱 2017-06-30 09:58:07
0
4
880

Ini ialah pemalam penarafan bintang, ditulis dalam js asli. Apabila bahagian for(var k = 0)... diekstrak, dan kemudian dilaksanakan ke bahagian that.getStarPoint.call(this,point,active), ia tidak akan berfungsi. Ini menunjukkan bintang[i], cara membuat bintang[i] dan bintang[k]. mempunyai yang sama Apakah peranannya?

html: (Bintang digantikan sementara dengan blok warna)

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

membalas semua(4)
女神的闺蜜爱上我
女神的闺蜜爱上我2017-06-30 10:00:07 Tingkat 4

Rasanya mengikat ini dengan getStarPoint() tidak masuk akal, kerana sebagai tambahan kepada elemen semasa, semua elemen sebelumnya mesti ditetapkan kepada aktif. Lebih baik untuk menggelung dan kemudian star[k].className = active;

Suka +0
Tambah Balasan
为情所困
为情所困2017-06-30 10:00:07 Tingkat 3

Saya rasa anda harus menganggap that作为getStarPoint的上下文，写作that.getStarPoint.call(that, point, active);，此处that sebagai contoh Bintang.

Suka +0
Tambah Balasan
阿神
阿神2017-06-30 10:00:07 Tingkat 2

Lulus tatasusunan str getStarPoint ialah operasi gelung tulen dan tidak mempunyai keperluan tentang perkara ini.

Suka +0
Tambah Balasan
学霸
学霸2017-06-30 10:00:07 Tingkat 1

Saya tidak begitu faham apa yang anda maksudkan dengan "bintang[i] dan bintang[k] mempunyai kesan yang sama". Jika onmouseover mengetahui bintang mana itu, ia boleh menggunakan penutupan untuk melepasi i:

untuk(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)

.....

}

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！