Javascript 如何正确拆分这两个Jquery函数？

我想做的是，考虑到以下脚本：

 (function($) {
  $.fn.Button_Activator = function() {
        return this.each(function() {
          var coll = document.getElementsByClassName("collapsible");
          var i;
          for (i = 0; i < coll.length; i++) {
              coll[i].addEventListener("click", function() {
              this.classList.toggle("active");
              var content = this.nextElementSibling;
              if (content.style.maxHeight){
                content.style.maxHeight = null;
              } else {
                content.style.maxHeight = content.scrollHeight + "px";
              }
            });
          }
        });
    };
})(jQuery); // End of use strict

第二个是“Button_Activator.js”：

（函数（$）{
$.fn.Button\u Activator=函数（）{
返回此。每个（函数（）{
var coll=document.getElementsByClassName（“可折叠”）；
var i；
对于（i=0；i

现在，当我使用前面的函数时，浏览器会显示“未捕获引用错误：未定义little_one”以及“jquery.min.js:2 jquery.Deferred exception:未定义little_one引用错误：未定义little_one”。

---

现在，在HTML中，我已经验证了它在Button_Activator.js之前导入了little_one.js，因此我最好的猜测是拆分的实现有问题。任何对此事有任何意见的人都会非常感激。

我发现代码片段有一些问题

jquery

$

对象上存在一个

小对象，因此您需要引用它

coll[i].addEventListener（“click”、$（）.little_one（coll[i]）；

addEventListener

期望函数引用作为第二个参数，但实际操作是立即调用函数并返回结果，因此需要传递函数引用

coll[i].addEventListener（“点击，$（）.little_one”）；

这一点。每个

都是为jQuery元素而存在的，而不是为DOM元素而存在的，一般来说，我建议不要将DOM元素与jQuery元素混合使用，因为很难跟踪哪个是哪个

（函数（$）{
$.fn.little\u one=函数（）{
this.classList.toggle（“活动”）；
var content=this.nextElementSibling；
if（content.style.maxHeight）{
content.style.maxHeight=null；
}否则{
content.style.maxHeight=content.scrollHeight+“px”；
};
};
})（jQuery）；//终止使用严格限制

---

工作指南：

谢谢你，真的，你澄清了我对此事的许多疑问。

(function ($) {
    $.fn.little_one = function (test) {
        return this.each(function (test) {
            this.classList.toggle("active");
            var content = this.nextElementSibling;
            if (content.style.maxHeight) {
                content.style.maxHeight = null;
            } else {
                content.style.maxHeight = content.scrollHeight + "px";
            };
        });
    };
    
})(jQuery); // End of use strict

(function ($) {
    $.fn.Button_Activator = function () {
        return this.each(function () {
            var coll = document.getElementsByClassName("collapsible");
            var i;
            for (i = 0; i < coll.length; i++) {
                coll[i].addEventListener("click", little_one(coll[i]));
            }
        });
    };
})(jQuery); // End of use strict