JQUERY und JAVASCRIPT OOP

Question

Ich habe eine Jquery-Funktion:

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

Es ist einfach toggleClass verwendet, um mir die gewünschte Ausgabe.

Ich habe viele Elemente, die ich diese Funktion verwenden möchte, das Problem ist die prozedurale Art der Programmierung Ich muss diese Funktion für jedes Element schreiben, ich möchte die Funktion ausführen. Zum Beispiel:

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

Wie Sie das einzige, was zu sehen, die sich geändert war die #expand_label_object und #expand_label_info.

Hat jemand irgendwelche Ratschläge dafür, wie ich ein Objekt in Javascript erstellen kann, das in der Lage ist, die Arbeit dieser Funktion auszuführen, und dann kann ich einfach ein neues Objekt dieser "Klasse" instanziieren, die die Aufgabe ausführen kann zu den neuen Informationen im Beispiel #expand_Date_Object.

Oder sollte ich ein Plugin für jquery schreiben, das damit umgehen wird. Wenn ja wie?

1. Kann ich ein Objekt und einen Prototyp dieses Objekts erstellen?
2. Sollte ich einen Konstruktor verwenden?
3. Wie kann ich die jquery-Bibliothek in einem Prototyp-Framework behandeln?

Answer 1

Sie können eine benannte Funktion erstellen, rufen Funktion this zu aktuellen klickten Element Einstellung Function.prototype.call() Verwendung Selektor-String übergeben als Parameter

$(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

funktionieren Es scheint, dass Sie ein elegantes Code wollen OOP Paradigma basiert auf ; wenn ja, nehmen Sie die Vorteile könnten aus ES6 Syntax:

1. Erstellen Zusammenfassung 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. Verwenden Sie 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, die Sie zielen.