You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在自定义jQuery函数外部调用其内部定义的函数

你当前调用失效的核心原因是GetResult属于$.fn.Test的内部私有函数,作用域仅限制在函数内部,默认无法被外部直接访问。要实现外部调用,只需要将需要公开的方法挂载到jQuery实例上即可。

最简修改方案

直接在你的原有代码基础上新增两行代码即可生效:

$(function() {
  
  $.fn.Test = function() {
    const $master = this;
    
    const $t1 = $master.find(".txt1"),
          $t2 = $master.find(".txt2"),
          $notice = $master.find(".notice");
    
    function Check() {
      $notice.removeClass("error success").hide();
      if ($t1.val().length === 0 && $t2.val().length === 0) {
        return;
      }
      if ($t1.val() == $t2.val()) {
        $notice.addClass("success").text("Text Matches!").show();
      }
      else{
        $notice.addClass("error").text("Text Does Not Match").show();
      }
    }
    
    $t1.on("keyup", Check);
    $t2.on("keyup", Check);
    
    /****** 这是我想要访问的目标函数 ********/
    function GetResult() {
      return $t1.val() == $t2.val();
    }

    // ----------------新增代码开始----------------
    // 将需要对外暴露的方法挂载到当前jQuery实例上
    $master.GetResult = GetResult;
    // 返回当前实例,符合jQuery插件链式调用约定,同时让外部可以拿到挂载了方法的实例
    return $master;
    // ----------------新增代码结束----------------
  };
  
  let $test = $("#container").Test();
  
  $("#btn").on("click", function() {
    console.log($test.GetResult());  // 现在已经可以正常调用
  });
});

多方法场景的规范插件模式

如果你的插件后续需要暴露多个公共方法,更推荐使用行业通用的jQuery插件调度模式,可维护性更强:

$.fn.Test = function(options) {
  // 所有公共方法统一维护
  const publicMethods = {
    // 初始化方法
    init: function() {
      const $master = this;
      const $t1 = $master.find(".txt1"),
            $t2 = $master.find(".txt2"),
            $notice = $master.find(".notice");
      
      // 私有方法无需对外暴露,直接定义在init内即可
      function Check() {
        $notice.removeClass("error success").hide();
        if ($t1.val().length === 0 && $t2.val().length === 0) return;
        $notice.addClass($t1.val() === $t2.val() ? "success" : "error")
          .text($t1.val() === $t2.val() ? "Text Matches!" : "Text Does Not Match")
          .show();
      }
      
      $t1.on("keyup", Check);
      $t2.on("keyup", Check);
      return $master;
    },
    // 公共方法:获取校验结果
    GetResult: function() {
      const $t1 = this.find(".txt1"), $t2 = this.find(".txt2");
      return $t1.val() === $t2.val();
    }
  }

  // 方法调度逻辑
  if (publicMethods[options]) {
    // 调用指定公共方法
    return publicMethods[options].apply(this, Array.prototype.slice.call(arguments, 1));
  } else if (typeof options === "object" || !options) {
    // 无匹配方法或传入的是配置参数时,走初始化逻辑
    return publicMethods.init.apply(this, arguments);
  } else {
    $.error(`Test插件不存在方法:${options}`);
  }
}

// 使用方式
$("#container").Test(); // 初始化插件
// 调用公共方法
console.log($("#container").Test("GetResult"));

内容的提问来源于stack exchange,提问作者bagofmilk

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.30 13:24:05