使用onClick var更改javascript中的id？

Question

令我惊讶的是，我设法让一些 js 工作，现在我想让它变得更复杂一些，这超出了我的专业范围。

我有一个按钮，点击后会重新加载我页面上的 iframe。我有多个 iframe，除了 1 个被隐藏。然后我使用 jquery 显示不同的 iframe 并根据单击的导航按钮隐藏前一个。例如"1-btn" (nav btn) 绑定到 "1-win" (iframe)，"2-btn" (nav btn) 绑定到 "2-win" (iframe) 等等。所以当你点击 "2-btn" , “1-win” iframe 隐藏，“2-win” iframe 显示。现在我想更改我的代码，以便与我的重新加载 javasrcipt 相关联。目前，我的 js 仅通过 iframe id 重新加载 1 个 iframe。我想每次都将此 id 更改为不同的 iframe。这将允许我的 Reload btn 仅重新加载当前显示的 iframe，而不是任何其他隐藏的 iframe。

这是我的重载 js

function Reload () {
var f = document.getElementById('1-win');
f.src = f.src;
}

如您所见，此重新加载脚本仅适用于 iframe“1-win”。当我单击“2-btn”导航以显示“2-win”iframe（并隐藏“1-win”）时，重新加载按钮仍然仅适用于“1-win”。因此，我希望它也能改变。例如当我单击“2-btn”（导航）以显示“2-win”iframe 时，我也想将 Reload id 更改为“2-win”。

我正在考虑在我的导航按钮中使用 onClick，该按钮通过与导航 btn 绑定的 iframe 的 id。但是，我不知道该怎么做。

完整代码见： https://github.com/tmacka88/Service-Manager 抱歉，如果这没有任何意义，我想不出更简单的方法来解释它。

谢谢

Answer 1

编辑
既然问题已经得到更好的定义，下面的答案可能仍然适用，也可能不适用。

---

您可以尝试的一种方法是在页面上设置一个隐藏字段，其中包含一个以分号分隔的 iframe 的 Id 列表。例如

<input type="hidden" name="iframeids" value="1;2;3;4;5">

在按钮的单击事件中，调用一些 JavaScript，获取隐藏字段的 value，获取分号前的第一个标记，然后重新组织字符串。一个例子：

// Next value is 1
// Use 1 in your JS
// Put 1 to the end, next is now 2
<input type="hidden" name="iframeids" value="2;3;4;5;1">

你会在JS函数中包含重新排列等的逻辑。

Answer 2

现在问题已经得到更好的定义，我们可以制定一个适当的解决方案。

以下是一些设计注意事项：

1. 理想情况下，您不希望为放置在页面上的每个 iframe 手动添加新按钮。主要原因是代码维护。如果您要添加或删除一个新 iframe，您的代码将无法正常运行。此外，所需的加价金额也会过高
2. jQuery 会让你的生活更轻松，虽然它不是必需的，但它会减少很多代码。首先了解 JavaScript 基础知识的重要性怎么强调都不为过，但这是你学习的责任 对于第 1 点，我们想要一个通用的解决方案，这样如果您添加更多 iframe，按钮会自动添加。 JavaScript 是执行此操作的方法（我假设这只是 HTML，而不是 ASP.net 或 php 或其他一些服务器端

第 2 点 - jQuery 将帮助解决第 1 点。

现在我们有了这个认识，让我们看一下我们需要做的事情的大纲：

1. 在 JavaScript 中，循环浏览页面上的 iframe 标记
2. 对于每个iframe，使用jquery 生成一个按钮，使用iframe 中的src 和id 等值作为按钮的属性
3. 在按钮中添加一些click-event 代码，以定义单击时需要执行的操作
4. 再次使用 jQuery，将新创建的按钮添加到 DOM

Answer 3

这成功了：

function Reload()
{
    $("iframe").each(function() 
    {
        if($(this).is(':visible'))
            $(this).attr('src', $(this).attr('src'));
    });
}