av一区二区在线观看_亚洲男人的天堂网站_日韩亚洲视频_在线成人免费_欧美日韩精品免费观看视频_久草视

您的位置:首頁技術(shù)文章
文章詳情頁

javascript - 又是this指向問題

瀏覽:155日期:2023-04-21 11:28:45

問題描述

這是一個星星評分插件,用原生js寫的。將for(var k = 0)...這一段抽出來時,然后執(zhí)行到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='http://m.4tl426be.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’, //鼠標移上去的樣式 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; //經(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(){ //點擊后的星星個數(shù)以及分數(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){ //獲取評分 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() 意義不大,因為除了當前元素,還有前面的元素都要置為 active,不如就 循環(huán)然后 star[k].className = active;

回答2:

我覺得,你應(yīng)該將that作為getStarPoint的上下文,寫作that.getStarPoint.call(that, point, active);,此處that才是Star實例。

回答3:

把str數(shù)組傳過去唄,getStarPoint 這個對純粹的循環(huán)操作 ,對this是啥并無要求。

回答4:

不太理解你說的 “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; //經(jīng)過的就添加active類} }})(i).....

}

標簽: JavaScript
相關(guān)文章:
主站蜘蛛池模板: 亚洲免费三区 | 狠狠久久综合 | 999久久精品| 欧美亚洲网站 | 黄色毛片在线看 | 日本三级电影在线看 | 国产精品综合一区二区 | 久久青青 | 精品免费视频 | 国产一区二区精品在线观看 | 日日操夜夜操天天操 | 欧美福利一区 | 一级黄在线观看 | 久久久久久久久久影视 | 日韩精品在线一区 | 日韩在线视频免费观看 | 黄色片免费看 | 欧美日韩国产精品激情在线播放 | 欧美精品久久久 | 欧美日韩高清 | 国产精品视频一区二区三区不卡 | 国产综合视频 | 超碰成人免费 | 午夜黄色影院 | 99久久精品国产一区二区三区 | av日日操 | 国外成人在线视频 | 免费看的黄网站 | 在线观看免费观看在线91 | 欧洲精品久久久久毛片完整版 | 欧美性生交大片免费 | 国产一区二区三区免费观看视频 | 成人做爰www免费看视频网站 | 毛片免费看的 | 亚洲精品大片 | 一级毛片大全免费播放 | 91久久国产 | 日韩精品一二三区 | 国产情品| 超碰免费在线观看 | 天天射网站|