2013-06-05 97 views
2

我對OOP很陌生。我的理解是,它就像CSS類,我們有類,然後我們可以申請/使用它。javascript/jquery oop學習

這是我的代碼。

$(".mybutton").click(function(){ 
    $(this).siblings('.mybutton').removeClass('active').end().addClass('active');   
}); 


$('.mybutton, .second').click(function(event){ 
    $('#thisDiv').hide().filter(this.hash).show(); 
    event.preventDefault(); 
}); 

$('.second').on("click", function(){ 
$(".mybutton").eq(1).siblings('.mybutton').removeClass('active').end().addClass('active'); 
    $("html, body").animate({ 
     scrollTop: $('#contact').offset().left - 20}, 
     800); 
}); 

我應該如何將它們轉換爲oop風格?

var Doit = { 
    init:function(){ 
     $(".mybutton").on("click", this.active); 
    }, 
    active:function(){ 
    $(this) 
     .siblings('.mybutton') 
      .removeClass('active') 
       .end().addClass('active'); 
    }, 
    filter:function { 


    } 


}; 

Doit.init(); 

如果有人能給我一個提示,如果我的代碼真的需要更改爲OOP?

感謝

+1

退房的http://jqueryboilerplate.com/。這是一種做法。 – elclanrs

回答

1

嘗試像,

var Doit = function(){ 
    this.init=function(){ 
     $(".mybutton").on("click", this.active); 
    }, 
    this.active=function(){ 
     $(this) 
      .siblings('.mybutton') 
       .removeClass('active') 
        .end().addClass('active'); 
    }, 
    this.filter=function() { 
     //code 
    } 
}; 

更多Javascript Object Oriented