JQUERY与JAVASCRIPT面向对象

我有一个jquery函数：

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

它只是使用toggleClass来提供所需的输出

我有很多元素我想在上面使用这个函数，问题是使用程序化的编程方式，我必须为我想在上面执行函数的每个元素编写这个函数。例如：

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

正如您所看到的，唯一改变的是expand_label_对象和expand_label_info

对于如何在javascript中创建一个能够执行此函数的对象，然后我可以简单地实例化此类的一个新对象，该对象可以根据示例expand_Date_object中提供的新信息执行任务，是否有人对我有任何建议

或者我应该为jquery编写一个插件来处理这个问题。 如果是，怎么做

我可以创建一个对象并将其原型化吗？ 我应该使用构造函数吗？ 如何在原型框架中处理jquery库？

---

您可以创建一个命名函数，调用函数将其设置为当前单击的元素，将选择器字符串作为参数传递给函数

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

});

---

似乎您需要一个基于OOP范例的优雅代码；如果是这样，您可以利用ES6语法：

1.构建抽象API： 2.使用API：

---

希望这是你的目标OOP

对否决投票的原因感到好奇吗？post中的javascript如何不满足OP中描述的要求？从未见过像u。。致以最良好的祝愿。@Nitin您认为答案的哪一部分需要编辑？@Nitin不需要两个额外的空格来传达方法的细节。你最初投反对票的原因是什么？根据堆栈规则，除非你对答案进行编辑，否则我无法对你的答案投票。你能提供此规则的链接吗？@Nitin不认为你投了反对票，问你是否投了反对票。这是投否决票的好理由吗？显示基本html结构。很可能只需一个事件处理程序和一些类或使用其他属性就可以做到这一点，这是一个一般性问题。请发布一个标记示例，并指定您正试图实现的目标。不，不要试图在任意问题上抛出OOP。这里您只需要一个基本的函数声明，以选择器作为参数。。。Op询问这是否可行，这是一种浪费精力的行为，会使一个简单的情况变得过于复杂。OP制造了一个XY问题我尊重你的意见。。然而，谁问似乎对OOP怀旧&我应该尊重他的情感。@guest271314:真的，真的，别让我哭。请。。我喜欢一些编程范例&我把自己放在问题所有者的位置上。。。太激动了。。啊，从我收集的评论来看，oop并不是最好的方法，

   //- -- 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");

             }
         }

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