javascript / jquery oop学习

Question

I am very new to OOP. my understanding is that, it is like CSS class, we have classes then we could apply/use it.

this is my code.

$(".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);
});

how should I convert them to oop style?

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


    }


};

Doit.init();

if someone could give me a hint, if my code really needs to be changed to OOP ?

Thanks

Answer 1

Try it like,

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

Read More Javascript Object Oriented