面向对象总结(01传参形式)

我一直相信实践是掌握理论知识的最好方法,看十遍概念不如自己动手做一遍。

直接在代码中分析啦~ 

//  这是一个答题的移动端网站,点击abc三个选项,选择答案是对的就页面展示对号图标提示选择正确,用户看到对错之后页面自动跳转至下一题
//  应该考虑到的问题有,当用户点击了其中一个选项之后,页面中的所有选项不可以再点击
//  第二,设置一个count值,计算用户答对的题数
    var count=0;
//	面向对象的方式
//  我采用的传参的方式,下方括号中就是我需要用到的数据,明明通俗易懂不再介绍
	function xuanze(rightxuanze,failxuazne01,failxuazne02,righticon,failicon01,failicon02,yemian){
	    this.rightxuanze = $(rightxuanze);//因为我传的的class类名,所以用jquery中$转化成可操作对象
	    this.failxuanze01=$(failxuazne01);
	    this.failxuanze02=$(failxuazne02);
	    this.righticon=$(righticon);
	    this.failicon01=$(failicon01);
	    this.failicon02=$(failicon02);
	    this.yemian=$(yemian);
	    this.init();
	}
	xuanze.prototype={//对象原型,在这里可以定义事件函数
	    init:function(){//init方法中一般做一些事件绑定,界面初始化的工作
	        this.bindEvents()
	    },
	    bindEvents:function(){//事件函数,具体时间具体填写
	        var that = this;//注意这里尤其重要,that和this可看文章最后具体分析
	        this.rightxuanze.on('click',function(){//点击正确的选项,count++,对号图标显示
	        	count++;
	            that.righticon.show();
	            that.yemian.css("pointer-events","none");//此css就是设置页面不能再点击
	            console.log(count,mySwiper.activeIndex+1);
	            delay();
	        });
	        this.failxuanze01.on('click',function(){//点击错误的选项,count不加一,错号图标显示
	            that.failicon01.show();
	            that.yemian.css("pointer-events","none");
	            console.log(count,mySwiper.activeIndex+1);
	            delay();
	        });
	        this.failxuanze02.on('click',function(){//点击错误的选项,count不加一,错号图标显示
	            that.failicon02.show();
	            that.yemian.css("pointer-events","none");
	            console.log(count,mySwiper.activeIndex+1);
	            delay();
	        });
	    }
	}
	//对象实例化,对象不实例化不能应用,括号中的命名就是传到上边形参的具体数据,有了具体数据,就能具体操作了
	var pg3=new xuanze('.pg3>.first','.pg3>.second','','.pg3>.right','.pg3>.wrong','','.pg3');
	var pg4=new xuanze('.pg4>.first','.pg4>.second','','.pg4>.right','.pg4>.wrong','','.pg4');
	var pg5=new xuanze('.pg5>.second','.pg5>.first','.pg5>.third','.pg5>.right','.pg5>.wrong01','.pg5>.wrong02','.pg5');
	var pg6=new xuanze('.pg6>.second','.pg6>.first','.pg6>.third','.pg6>.right','.pg6>.wrong01','.pg6>.wrong02','.pg6');
	var pg7=new xuanze('.pg7>.first','.pg7>.second','.pg7>.third','.pg7>.right','.pg7>.wrong01','.pg7>.wrong02','.pg7');
	var pg8=new xuanze('.pg8>.second','.pg8>.first','','.pg8>.right','.pg8>.wrong','','.pg8');
	var pg9=new xuanze('.pg9>.first','.pg9>.second','','.pg9>.right','.pg9>.wrong','','.pg9');
	var pg10=new xuanze('.pg10>.first','.pg10>.second','','.pg10>.right','.pg10>.wrong','','.pg10');
	var pg11=new xuanze('.pg11>.third','.pg11>.first','.pg11>.second','.pg11>.right','.pg11>.wrong01','.pg11>.wrong02','.pg11');
	var pg12=new xuanze('.pg12>.third','.pg12>.first','.pg12>.second','.pg12>.right','.pg12>.wrong01','.pg12>.wrong02','.pg12');
	var pg13=new xuanze('.pg13>.first','.pg13>.second','.pg13>.third','.pg13>.right','.pg13>.wrong01','.pg13>.wrong02','.pg13');
	var pg14=new xuanze('.pg14>.third','.pg14>.first','.pg14>.second','.pg14>.right','.pg14>.wrong01','.pg14>.wrong02','.pg14');
	var pg15=new xuanze('.pg15>.second','.pg15>.first','.pg15>.third','.pg15>.right','.pg15>.wrong01','.pg15>.wrong02','.pg15');
	var pg16=new xuanze('.pg16>.third','.pg16>.first','.pg16>.second','.pg16>.right','.pg16>.wrong01','.pg16>.wrong02','.pg16');

关于上述的的this和that 

先看this控制台打印出来的

显而易见在绑定的这个事件中this打印出来的是被点击的img元素,只是一张图片,这样他是没有办法对对象的failicon进行操作的。

再看that控制台打印出来的

而that打印出来的是创建的对象,因此,taht.failicon才可以成立,进而进行操作。 

具体情况具体分析啦~,面向对象定义方法有很多种,有空就都可以联系一下。

总之还是一句话,编程和练习是密不分家的,多挖坑多填坑才能进步,加油

我也是刚学习,如果哪位大神可以指教一二,甚是感激。 

猜你喜欢

转载自blog.csdn.net/qq_40721240/article/details/83069952