Question

我有一个网页，该网页的顶部有四个标签。单击选项卡之一将在下面显示相应的页面。选项卡的选择和显示由我称为“ changeTab”的js / jQuery函数控制。那里没什么。

我想为每个选项卡设置一个（不同的）JS函数，以在该选项卡显示时运行，类似于加载主页本身时jQuery'document.ready'的工作方式。我可以在“ changeTab”函数的底部放置一个函数调用，例如“ tabLoaded（）”。但这显然每次只会调用同一个函数。

我可以将函数命名为'tab_1_Loaded'，'tab_2_Loaded'等，但是随后我需要某种方式来动态修改函数调用，以便包括选项卡的编号（我已经有了选项卡的编号，我只需要找出如何将其插入到函数调用中。）

我希望有一个像这样的函数调用：

tab_[insert tabNum dynamiclly here]_Loaded();

用几行代码就能做到吗？

我已经阅读了有关Stackoverflow的文章，但是它们似乎确实解决了一个不同的问题，即使用动态派生的名称创建（新的）函数。我可以很清楚地知道我的函数叫什么。我需要一个动态派生的电话。我怀疑'eval'可能是可行的，但我的阅读还建议应避免使用eval，因此我并未进行追踪。

我的后备是一系列条件：

    if(tabNum == 1) tab_1_Loaded();
    if(tabNum == 2) tab_2_Loaded();
    etc.

但是它看起来不太优雅（尽管很简单），并且在这种情况下（在可能性很小的情况下）确实可以工作。有没有一种更好的方法也很简单？

后来者：我后来意识到我现在正在处理的特定页面/选项卡还有一个额外的复杂性（尽管它不适用于整个网站）。此页面用于在线预订。第一个选项卡是预订表格（访客输入日期，人数）。除非访问者单击“下一步”并进入下一个阶段，否则不会填充第二个及后续选项卡。因此，'changeTabs'函数中的任何函数调用都是在选项卡的内容实际加载之前进行的，因此它不起作用。

为了解决这个问题，我将把调用放入每个选项卡内容底部的脚本中。我希望可以有更多优雅的方法，但这只是一行代码，而所有提供的解决方案实际上都比较冗长（对我来说更难理解）。我可能仍需要来自“ changeTab”的电话来应付访问者在完成预订之前浏览各个标签。

Answer 1

按下选项卡时，无论将调用多少个回叫功能，始终将调用回叫功能。您不能有条件地通过按键调用回调函数。实施此操作的理想方法是

i）为tab事件提供单个回调功能 ii）标识元素的ID，当在该回调函数中按下Tab键时，该元素当前处于焦点 iii）重点添加基于该元素的条件，以使您具有相应元素的功能逻辑

Answer 2

是的，可以按照您的要求进行操作。用全局范围声明的所有函数和变量都是window对象的方法和属性，因此您可以将函数的名称构建为字符串，并通过括号表示法引用它。因此，假设您已经将tabNumber存储在变量中：

var functionName = "tab_"+tabNumber+"_Loaded";
window[functionName]();

（请参见https://codepen.io/slynagh/pen/MMVEoE）

但是更好的方法是使用回调函数，或者使用一个tab_Loaded()函数，它接受tabNumber作为参数，例如：

function tab_Loaded(tabNumber){
  if(tabNumber === 1) { do something }
  else if(tabNumber === 2 ) {do something else}
  //etc
}

根据上下文动态修改函数调用

2 个答案: