javascript - 我把js改成了面向对象的编程方式，怎么更改a链接里的绑定函数-PHP中文网问答

话不多说直接上图
我在a标签中是这样的

然后在js中是这样的

但我现在想试着把js改成面向对象编程的方式

爆出来的错误是这样的

怎么改写a链接里的方法才妥当

html：




    
    Preview Slideshow
    
    


    
        

            

                
                

                    
{{h2}}
                    {{h3}}

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;
}

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

全部回复(2)

黄舟2017-04-11 11:54:37 2楼

在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>

赞 +0

添加回复

PHP中文网2017-04-11 11:54:37 1楼

你的确定你的switchSlider函数在Obj类里面？