javascript - 我把js改成了面向对象的编程方式，怎么更改a链接里的绑定函数
本文介绍了javascript - 我把js改成了面向对象的编程方式，怎么更改a链接里的绑定函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
话不多说 直接上图
我在a标签中是这样的
然后在js中是这样的
但我现在想试着把js改成面向对象编程的方式
爆出来的错误是这样的
怎么改写a链接里的方法才妥当
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Preview Slideshow</title>
<link rel="stylesheet" href="css/slideshow.css">
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div class="slider">
<div class="main" id="template_main">
<div class="main-i {{css}}" id="main_{{index}}">
<img class="picture" src="img/{{index}}.jpg" alt="img">
<div class="caption">
<h2>{{h2}}</h2>
<h3>{{h3}}</h3>
</div>
</div>
</div>
<div class="ctrl" id="template_ctrl">
<a class="ctrl-i" id="ctrl_{{index}}" href="javascript:switchSlider({{index}});">
<img src="img/{{index}}.jpg">
</a>
</div>
</div>
</body>
</html>css
@charset "utf-8";
body,h2,h3{
padding: 0;
margin: 0;
}
body{
font-size: 14px;
font-family: "Avenir Next";
color: #555;
-webkit-font-smoothing: antialiased;
padding-top: 50px;
}
/*幻灯片区域*/
.main-i,
.main,
.slider{
width: 100%;
height: 400px;
position: relative;
}
.main{
overflow: hidden;
}
.main-i img{
width: 100%;
position: absolute;
top: 50%;
left: 0;
}
.caption{
position: absolute;
top: 30%;
right: 63%;
}
.caption h2{
font-size: 40px;
line-height: 50px;
color: #b5b5b5;
text-align: right;
}
.caption h3{
font-size: 70px;
line-height: 70px;
color: #000;
font-family: "Open Sans Condensed";
}
/*幻灯片样式切换*/
.main-i{
opacity: 0;
position: absolute;
right: 50%;
top: 0;
transition: all 0.5s;
z-index: 2;
}
.main-i_right{
right: -50%;
}
.caption h2{
margin-right: 45px;
}
.caption h3{
margin-right: -45px;
}
.caption h2,
.caption h3{
opacity: 0;
transition: all 1s 0.5s;
}
#main_background,
.main_active{
right: 0;
opacity: 1;
}
.main_active h2,
.main_active h3{
opacity: 1;
margin-right: 0;
}
#main_background{
z-index: 1;
}
/*控制按钮区域*/
.ctrl{
width: 100%;
text-align: center;
height: 14px;
line-height: 14px;
position: absolute;
bottom: -14px;
}
.ctrl-i{
display: inline-block;
width: 150px;
height: 14px;
background-color: #666;
box-shadow: 0 1px 1px rgba(0,0,0,0.3);
position: relative;
margin-right: 1px;
}
.ctrl-i img{
width: 100%;
position: absolute;
bottom: 30px;
left: 0;
opacity: 0;
transition: all 0.8s;
}
.ctrl-i:hover{
background-color: #f0f0f0;
}
.ctrl-i:hover img{
opacity: 1;
-webkit-box-reflect: below 0px -webkit-gradient(
linear,
left top,
left bottom,
from( transparent ),
color-stop( 70%,transparent ),
to( rgba(255,255,255,0.3) )
);
bottom: 14px;
z-index: 3;
}
/*控制按钮样式切换*/
.ctrl_active:hover,
.ctrl_active{
background-color: #000;
}
.ctrl_active:hover img{
opacity: 0;
}js
window.onload = function(){
var o = new Obj();
o.init();
}
function Obj(){
this.data = [
{ "img": 1,"h2": "Creative","h3": "DUET"},
{ "img": 2,"h2": "Friendly","h3": "DEVIL"},
{ "img": 3,"h2": "Tranquilent","h3": "COMPATRIOT"},
{ "img": 4,"h2": "Insecure","h3": "HUSSLER"},
{ "img": 5,"h2": "Loving","h3": "REBEL"},
{ "img": 6,"h2": "Passionate","h3": "SEEKER"},
{ "img": 7,"h2": "Crazy","h3": "FRIEND"}
];
}
Obj.prototype.init = function(){
this.addSliders();
this.switchSlider(1)
}
Obj.prototype.addSliders = function(){
var tpl_main = this.gE('template_main').innerHTML
.replace(/^\s*/,'')
.replace(/\s*$/,'');
var tpl_ctrl = this.gE('template_ctrl').innerHTML
.replace(/^\s*/,'')
.replace(/\s*$/,'');
var out_main = [],out_ctrl = [];
for( var i=0;i<this.data.length;i++ ){
var html_main = tpl_main
.replace(/{{index}}/g,this.data[i].img)
.replace(/{{h2}}/g,this.data[i].h2)
.replace(/{{h3}}/g,this.data[i].h3)
.replace(/{{css}}/g,['','main-i_right'][i%2]);
var html_ctrl = tpl_ctrl
.replace(/{{index}}/g,this.data[i].img);
out_main.push(html_main);
out_ctrl.push(html_ctrl);
}
this.gE('template_main').innerHTML = out_main.join('');
this.gE('template_ctrl').innerHTML = out_ctrl.join('');
this.gE('template_main').innerHTML += tpl_main
.replace(/{{index}}/g,'{{index}}')
.replace(/{{h2}}/g,this.data[0].h2)
.replace(/{{h3}}/g,this.data[0].h3);
this.gE('main_{{index}}').id = 'main_background';
}
Obj.prototype.switchSlider = function(num){
var self = this;
var clear_main = self.gE('.main-i'),clear_ctrl = self.gE('.ctrl-i');
for(var i=0;i<clear_ctrl.length;i++){
clear_main[i].className = clear_main[i].className
.replace(' main_active','');
clear_ctrl[i].className = clear_ctrl[i].className
.replace(' ctrl_active','');
}
var main = self.gE('main_' + num),ctrl = self.gE('ctrl_' + num);
main.className += ' main_active';
ctrl.className += ' ctrl_active';
setTimeout(function(){
self.gE('main_background').innerHTML = main.innerHTML;
}, 1000);
self.movePicture();
}
Obj.prototype.movePicture = function(){
var pic = this.gE('.picture');
for(var i=0;i<pic.length;i++){
pic[i].style.marginTop = -( pic[i].clientHeight/2 ) + 'px';
}
}
Obj.prototype.gE = function(id){
if( id.substr(0,1) == '.' ){
return document.getElementsByClassName(id.substr(1));
}
return document.getElementById(id);
}
解决方案
在Obj的原型链上定义addSliders和switchSlider方法：
Obj.prototype.addSliders = function(){
//TBD
};
Obj.prototype.switchSlider = function(index){
//TBD
};补充：
问题在于，你在a链接里仍然直接引用了全局定义的switchSlider方法，但实际上你已经把该方法移除，并整合到了Obj类里，所以当点击链接时就会报错switchSlider未定义。
如果你硬要继续使用Obj类，那可以把onload重写一下：
window.onload = function(){
window.o = new Obj();
window.o.init();
}然后修改a链接为：
<a class="ctrl-i" id="ctrl_{{index}}" href="javascript:o.switchSlider({{index}});">
<img src="img/{{index}}.jpg">
</a>这篇关于javascript - 我把js改成了面向对象的编程方式，怎么更改a链接里的绑定函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
