JQUERY和JAVASCRIPT OOP

Question

I have a jquery function:

$(document).ready(function(){
$("#expand_label_object").on("click", function(){ 
$(this).toggleClass("col-3");
$(this).toggleClass("col-12"); 
$("#expand_label_info").toggleClass("hidden");
});
});

It simply uses toggleClass to give me the desired output.

I have a lot of elements that I want to use this function on, the problem is using the procedural way of programming I will have to write this function for each element I would like to perform the function on. For example:

$(document).ready(function(){
$("#expand_Date_object").on("click", function(){
$(this).toggleClass("col-3");
$(this).toggleClass("col-12");
$("#expand_Date_info").toggleClass("hidden");
});
});

As you can see the only thing that changed was the #expand_label_object and #expand_label_info.

Does anyone have any advise for how I can go about creating an object in javascript that will be able to perform the work of this function and then I can simply instantiate a new object of this "class" that can perform the task on the new information provided in example #expand_Date_Object.

Or should I write a plugin for jquery that will handle this. If so how?

1. Can I create an object and prototype that object?
2. Should I use a constructor?
3. How will I be able to handle the jquery library in a prototype framework?

Answer 1

You can create a named function, call function setting this to current clicked element utilizing Function.prototype.call() , pass selector string as parameter to function

$(document).ready(function(){

  function handleClick(selector) { 
    $(this).toggleClass("col-3");
    $(this).toggleClass("col-12"); 
    $(selector).toggleClass("hidden");
  }   

  $("#expand_label_object").on("click", function() { 
    handleClick.call(this, "#expand_label_info")
  });

  $("#expand_Date_object").on("click", function() { 
    handleClick.call(this, "#expand_Date_info")
  });

});

Answer 2

It seems that you want an elegant code based on OOP paradigm ; if so , you could take advantage from ES6 syntax:

1. Build Abstract API :

   //- -- JQuery Class

   class $Class{
         constructor(selector,parent){
             this.selector=selector;
             this.parent= parent;
         }
         get element(){
             return (this.parent)?$(this.selector,this.parent):$(this.selector);
          }
         on(event,callback){

              this.element.on(event,callback);
         }

   }

    //Common service (contains static methods)

        class CommonService{

            static toggle1(htmlElement){
                 $(htmlElement).toggleClass("col-3");
                 $(htmlElement).toggleClass("col-12");
                 $("#expand_Date_info").toggleClass("hidden");

             }
         }

2. Use API :

 var exp_label=new $Class('#expand_label_object');
 exp_label.on('click',function(){ CommonService.toggle1(this)} ) 

  // the same of the other code , it will be : 
 var exp_date=new $Class('#expand_Date_object');
 exp_date.on('click',function(){ CommonService.toggle1(this)} ) 

Hope this OOP that you target.