asp.net 用户控件中的 Javascript 变量 - 覆盖同一插入的用户控件中的变量

它不起作用，因为您使用的是单个实例变量 HFLoader ，而不是实例。

因此，修复它的一种方法是将HFLoader包装在更紧密的（函数、本地作用域）中，以便对象按方法调用限定作用域。 在下面的示例中，我将 HFLoader 变量包装在 creator 函数中。 然后，对HFLoaderCreator的每次调用将生成HFLoader对象的不同版本（实例）。 我选择这样做而不是创建一个真正的JS类的原因是因为它需要最少的代码更改来演示如何完成它。

编辑。 假设您想在以后召回 HFLoader 以调用一些东西，例如saveHiddenField方法。 为此，我已经做了 2 个。1）我在传入的三个元素中添加了data('HFLoader')，因此您可以使用其中任何一个来调用HFLoader设置。 2）我添加了自定义事件，您可以触发这些事件来调用方法。 这两个选项显示了jQuery插件开发人员用来允许访问底层结构的两种不同方式。

<script type="text/javascript">
    HFLoaderCreator("<%=Button1.ClientID %>", "<%=HiddenField1.ClientID %>", "<%=Label1.ClientID %>");
</script>

function HFLoaderCreator(btn, hf, label)
{
    var HFLoader = {
        button: null,
        hiddenField: null,
        label: null,
        declareVariables: function (btn, hf, label) {
            HFLoader.button = btn;
            HFLoader.hiddenField = hf;
            HFLoader.label = label;
        },
        saveHiddenField: function (data) {
            $("#" + HFLoader.hiddenField).val(data);
        },
        buttons: function () {
            $("#" + HFLoader.button).click(function () {
                var datatest = "Data from button ID: " + $(this).attr("id");
                HFLoader.saveHiddenField(datatest);
                $("#" + HFLoader.label).html($("#" + HFLoader.hiddenField).val());
                return false;
            });
            // add the data so it can be recalled at a later date
            $("#" + HFLoader.button).data('HFLoader', HFLoader);
            $("#" + HFLoader.hiddenField).data('HFLoader', HFLoader);
            $("#" + HFLoader.label).data('HFLoader', HFLoader);
            // add custom event handlers - saveHiddenField
            $("#" + HFLoader.button).on('saveHiddenField', HFLoader.saveHiddenField);
            $("#" + HFLoader.hiddenField).on('saveHiddenField', HFLoader.saveHiddenField);
            $("#" + HFLoader.label).on('saveHiddenField', HFLoader.saveHiddenField);
            // add custom event handlers - showEvent
            $("#" + HFLoader.button).on('showEvent', HFLoader.showEvent);
            $("#" + HFLoader.hiddenField).on('showEvent', HFLoader.showEvent);
            $("#" + HFLoader.label).on('showEvent', HFLoader.showEvent);  
        },
        init: function () {
            $(function () {
                HFLoader.buttons();
            });
        }
    };
   HFLoader.declareVariables(btn, hf, label);
   HFLoader.init();
   return HFLoader;
}

所以现在要利用这一切。 在 JS 中，如果你想根据 Button1 ID 查找 HFLoader 数据，你可以执行以下操作：

<script type="text/javascript">
  var HFLoader = $('#<%=Button1.ClientID %>').data('HFLoader');
  HFLoader.showEvent();
</script>

如果要使用 ButtonID1 触发自定义事件（最终将调用 showEvent 方法），可以执行以下操作：

<script type="text/javascript">
  $('#<%=Button1.ClientID %>').trigger('showEvent');
</script>

如果你想内联做，就像你的第一个例子一样......

<input type="button" ID="Button2" onclick="$('#<%=Button1.ClientID %>').data('HFLoader').showEvent();" value="Show" />

尽管我强烈建议使用 JS 将事件连接到 Button2，例如：

$(function()
{
  $('#<%=Button2.ClientID').click(function()
  {
    $('#<%=Button1.ClientID %>').data('HFLoader').showEvent();
    return false;
  });
});

这样它就不是内联脚本。 总的来说，HFLoader 的脚本有点被黑客入侵。 我建议看看我整理的例子，以提取有用的信息，并考虑重新思考和/或重写你做事的方式。 你的大脑正在推动你走向某种"全局"视图，或者某种称为HFLoader的自动范围变量。 但是，如果一个页面上有 5 个实例，那么您确实需要某个 HFLoader 对象的实例，而不是 HFLoader 的某个全局概念。 这就像创建一个类的新实例，而不是使用类的静态或单例实例 - 两个非常不同的概念！

我希望这有所帮助。