我一直相信实践是掌握理论知识的最好方法,看十遍概念不如自己动手做一遍。
直接在代码中分析啦~
// 这是一个答题的移动端网站,点击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才可以成立,进而进行操作。
具体情况具体分析啦~,面向对象定义方法有很多种,有空就都可以联系一下。
总之还是一句话,编程和练习是密不分家的,多挖坑多填坑才能进步,加油
我也是刚学习,如果哪位大神可以指教一二,甚是感激。