javascript - 又是this指向問題
問題描述
這是一個(gè)星星評(píng)分插件，用原生js寫的。將for(var k = 0)...這一段抽出來時(shí)，然后執(zhí)行到that.getStarPoint.call(this,point,active)這部分就不行了，這個(gè)this是指向star[i]，如何將star[i]和star[k]有相同的作用呢？
html: (星星暫時(shí)用顏色塊代替)
<!DOCTYPE html><html><head> <meta charset='utf-8'> <title>星星評(píng)分插件</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> <!-- 建議放評(píng)分的盒子也放在同一個(gè)盒子里面并且與星星的標(biāo)簽不一樣，這樣方面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='http://www.cgvv.com.cn/wenda/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’, //鼠標(biāo)移上去的樣式 starPoint: ’.star-point’ //星星評(píng)分};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; //經(jīng)過的就添加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(){ //點(diǎn)擊后的星星個(gè)數(shù)以及分?jǐn)?shù) 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){ //獲取評(píng)分 for(var k = 0; k<point; k++){this.className = active; }},getElem: function(obj){ //獲取dom元素 return document.querySelector(obj);},extend: function(source,value){ //拓展參數(shù)的函數(shù) for(var i in value){if(value.hasOwnProperty(i)){ source[i] = value[i];} } return source;} }}())
問題解答
回答1：感覺把 this 綁到 getStarPoint() 意義不大，因?yàn)槌水?dāng)前元素，還有前面的元素都要置為 active，不如就 循環(huán)然后 star[k].className = active;
回答2：我覺得，你應(yīng)該將that作為getStarPoint的上下文，寫作that.getStarPoint.call(that, point, active);，此處that才是Star實(shí)例。
回答3：把str數(shù)組傳過去唄，getStarPoint 這個(gè)對(duì)純粹的循環(huán)操作 ，對(duì)this是啥并無要求。
回答4：不太理解你說的 “star[i]和star[k]有相同的作用”， 是什么意思。如果onmouseover 知道自己是哪一個(gè)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; //經(jīng)過的就添加active類} }})(i).....
}
相關(guān)文章：
1. javascript - js 有什么優(yōu)雅的辦法實(shí)現(xiàn)在同時(shí)打開的兩個(gè)標(biāo)簽頁(yè)間相互通信？2. html5和Flash對(duì)抗是什么情況？3. android - 目前有哪些用Vue.js開發(fā)移動(dòng)App的方案？4. java - 新手做一個(gè)安卓視頻播放器，想實(shí)現(xiàn)一個(gè)進(jìn)度條，按鈕那種在視頻下方懸浮的功能，不知道思路！5. css3 - Typecho 后臺(tái)部分表單按鈕在 Chrome 下出現(xiàn)靈異動(dòng)畫問題，求解決6. java - android代碼重構(gòu)：如何把a(bǔ)pp設(shè)置里的頭像UI做成通用的？7. javascript - 怎樣限制同一個(gè)瀏覽器不能登錄兩個(gè)賬號(hào)8. 想找個(gè)php大神仿個(gè)網(wǎng)站。9. javascript - 一個(gè)抽獎(jiǎng)的效果（如圖）？10. javascript - jquery怎么給select option一個(gè)點(diǎn)擊時(shí)觸發(fā)的事件,如圖 如果選擇自定義觸發(fā)一個(gè)時(shí)間？
網(wǎng)公網(wǎng)安備