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

Question

我想做的是，给定以下脚本：

 (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

我试图将它拆分为两个单独文件中的两个函数，第一个是：“little_one.js”

(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

第二个是“Button_Activator.js”：

(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

现在，当我使用以前的函数时，浏览器会显示“未捕获的引用错误：little_one 未定义”以及“jquery.min.js:2 jQuery.Deferred 异常” : little_one 未定义 ReferenceError: little_one 未定义”。现在，在 HTML 中我已经验证它在 Button_Activator.js 之前导入 little_one.js 因此我最好的猜测是拆分的实现有问题。任何对此事有任何意见的人都会非常感激。

Answer 1

我发现代码片段存在一些问题，

little_one 存在于 jquery $ 对象上，因此您需要引用

coll[i].addEventListener("click", $().little_one(coll[i]));

addEventListener 需要一个函数引用作为它的第二个参数，但你实际做的是立即调用函数并返回结果，所以你需要传递函数引用

coll[i].addEventListener("click", $().little_one);

this.each 存在于 jQuery 元素中，而不存在于 DOM 元素中，通常我建议不要将 DOM 元素与 jQuery 元素混合，因为很难知道哪个是哪个。

(function ($) {
    $.fn.little_one = 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

工作 jsFiddle：http://jsfiddle.net/76yumo4n/

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

how do i split these two Jquery functions properly?

javascript

jquery

jquery-plugins