GoDotDotDot 2016-08-24 11:14 采纳率: 50%
浏览 1163

JavaScript中原型链中添加事件问题

我在事件中调用成员函数,报showCheckedNums is not a function错误。具体代码如下

 <!DOCTYPE html PUBLIC "-//W3C//Dth XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/Dth/xhtml1-transitional.dth">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="UTF-8">
<head>
</head>
<body>
    <input type="checkbox" value="1" id="check0" name="ck" />num1
    <input type="checkbox" value="2" id="check1" name="ck"/>num2
    <input type="checkbox" value="4" id="check2" name="ck"/>num3
    <input type="checkbox" value="8" id="check3" name="ck"/>num4
    <hr />
    选择结果:<label id="ckRes">0</label>
    <hr />  
</body>
</html>
<script>
    function ckCheck (mask,name) {
        this.mask = mask;//用于恢复默认值
        this.name = name;//用checkbox选择器,值为checkbox的name值
        this.temp = mask;//用于操作
        this.nodes = [];
    }
    ckCheck.prototype={
        start:function () {
            this.nodes = document.getElementsByName(this.name);
            this.default();
            this.addEvtLisener();
        },
        showCheckedNums:function(argument){
            document.getElementById("ckRes").innerHTML= this.temp;
        },
        default:function (argument) {
            for(var j = 0;j<this.nodes.length ;j++){
                //初始化checkbox
                this.nodes[j].checked = this.nodes[j].value & this.mask ;//1
            };
            this.showCheckedNums();
        },
        addEvtLisener:function(){
            for(var i = 0; i < this.nodes.length; i++){
                this.nodes[i].addEventListener('click', function (e) {
                    //如果选中:做或运算,否则做按位异或
                    e.target.checked ? this.temp|=e.target.value:this.temp^=e.target.value;
                    //console.log(typeof this.showCheckedNums);
                    this.showCheckedNums();
                })
            }
        },
    }
    var obj = new ckCheck(7,"ck")
    obj.start();
</script>

即在点击checkbox的时候报错。不知道为什么,还请大神能够帮忙解答。

  • 写回答

2条回答 默认 最新

  • wjf8882300 2016-08-24 12:22
    关注

    看样子你是个新手,你不了解js中this的作用域,直接上代码解答你的困惑。

    addEvtLisener:function(){
    var me = this;
    for(var i = 0; i < this.nodes.length; i++){
    this.nodes[i].addEventListener('click', function (e) {
    //如果选中:做或运算,否则做按位异或
    e.target.checked ? me.temp|=e.target.value:me.temp^=e.target.value;
    //console.log(typeof this.showCheckedNums);
    me.showCheckedNums();
    })
    }
    },

                一旦你的this到了click的事件的function里的时候,function中的this已经不是你的ckCheck。而是指你的this.node[i]这个对象,就是你的checkbox。
    
    评论

报告相同问题?

悬赏问题

  • ¥15 基于卷积神经网络的声纹识别
  • ¥15 Python中的request,如何使用ssr节点,通过代理requests网页。本人在泰国,需要用大陆ip才能玩网页游戏,合法合规。
  • ¥100 为什么这个恒流源电路不能恒流?
  • ¥15 有偿求跨组件数据流路径图
  • ¥15 写一个方法checkPerson,入参实体类Person,出参布尔值
  • ¥15 我想咨询一下路面纹理三维点云数据处理的一些问题,上传的坐标文件里是怎么对无序点进行编号的,以及xy坐标在处理的时候是进行整体模型分片处理的吗
  • ¥15 CSAPPattacklab
  • ¥15 一直显示正在等待HID—ISP
  • ¥15 Python turtle 画图
  • ¥15 stm32开发clion时遇到的编译问题