单个页面上有多个Javascript小部件

大家好，Javascript和小部件专家

在过去的两天里，我一直在绞尽脑汁，想弄明白如何启用我的小部件，使它可以在同一页面上包含两次

这就是我所做的

1.driver.js（加载所有需要的文件） 通过document.write调用加载jquery、jqueryui、wdcreate.js、set tabs.js

2.wdcreate.js（创建选项卡列表和内容） 没有什么复杂的，只是一个ui和li列表，用于创建分配给wHTML的3个选项卡内容 然后通过

document.getElementById(tabid+"_mywidget_container").innerHTML = wHTML;

3.settabs.js（理想情况下应该是启用选项卡）只有一行来加载选项卡容器

$(document).ready(function() {$( "#"+tabid+"_mywidget_container" ).tabs();});

4.index.html-（包含小部件的测试页面） 这个页面只包含两个小部件

<script type='text/javascript'> 
    var tabid='001';
    document.write('<scr'+'ipt type="text/JavaScript" src="http://localhost:8080/demo/driver.js"></scr'+'ipt>'); 
    </script>
    <div id="001_mywidget_container"></div>

<script type='text/javascript'> 
var tabid='002';
document.write('<scr'+'ipt type="text/JavaScript" src="http://localhost:8080/demo/driver.js"></scr'+'ipt>'); 
</script>
<div id="002_mywidget_container"></div>

这是带有静态容器的页面，但实际上这些容器是动态的

http://www.werindia.com/demo/index3.html

---

将driver.js文件路径正确放置在指向localhost的位置，将其更改为

使用下面的代码生成脚本标记

var headID = document.getElementsByTagName("head")[0];         
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'http://www.somedomain.com/somescript.js';
headID.appendChild(newScript);

---

将driver.js文件路径正确放置在指向localhost的位置，将其更改为

使用下面的代码生成脚本标记

var headID = document.getElementsByTagName("head")[0];         
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'http://www.somedomain.com/somescript.js';
headID.appendChild(newScript);

---

好吧，随便说说，下面的事情毫无意义

• 您已经将实现代码和依赖项混合到一个文件中，并且您将加载/执行所有这些代码两次

• 您不仅仅是通过脚本标记链接两次。出于某种原因，您觉得必须使用document.write

• 现在是2012年，您正在使用document.write

• 您有一些常用的选项卡功能，您希望访问两个div容器，并且出于某种原因，您正在使用id而不是类。看起来IDs可能会确定tabs.js中构建了哪些选项卡，但我只能假设，因为您没有显示这些代码

我们不会在JavaScript中重新添加脚本标记以使相同的事情发生两次。我们发射两次函数。或者我们在更一般的DOM元素类别中调用正确的函数

如果以下是在这些容器中构建选项卡所需的全部内容：

$(document).ready(function() {$( "#"+tabid+"_mywidget_container" ).tabs();});

那么这就更有意义了：

$(document).ready(function() {$( ".tab_container" ).tabs();});

---

如果您不知道要使

.tab\u container

正常工作，HTML中需要包含哪些内容，我认为您需要将所有这些都记下来，并比您更深入地学习基础知识。尽量使JS与HTML完全分离。在页面底部链接文件一次。学习domapi或至少了解jQuery的工作原理。试着把JS看作是在HTML上运行，而不是简单地在解析时编写它。

好吧，下面的事情没有意义

• 您已经将实现代码和依赖项混合到一个文件中，并且您将加载/执行所有这些代码两次

• 您不仅仅是通过脚本标记链接两次。出于某种原因，您觉得必须使用document.write

• 现在是2012年，您正在使用document.write

• 您有一些常用的选项卡功能，您希望访问两个div容器，并且出于某种原因，您正在使用id而不是类。看起来IDs可能会确定tabs.js中构建了哪些选项卡，但我只能假设，因为您没有显示这些代码

我们不会在JavaScript中重新添加脚本标记以使相同的事情发生两次。我们发射两次函数。或者我们在更一般的DOM元素类别中调用正确的函数

如果以下是在这些容器中构建选项卡所需的全部内容：

$(document).ready(function() {$( "#"+tabid+"_mywidget_container" ).tabs();});

那么这就更有意义了：

$(document).ready(function() {$( ".tab_container" ).tabs();});

---

如果您不知道要使

.tab\u container

正常工作，HTML中需要包含哪些内容，我认为您需要将所有这些都记下来，并比您更深入地学习基础知识。尽量使JS与HTML完全分离。在页面底部链接文件一次。学习domapi或至少了解jQuery的工作原理。试着把JS想象成作用于HTML，而不是简单地在解析时编写它。

请显示小部件代码。你做了什么调试？错误是什么？使用类而不是ID初始化选项卡。对于具有相同类的多个元素，可以正常工作。谢谢。下面是两个页面，展示了这个简单小部件的使用。如果我已经知道div id和widget的数量，这就不是问题。但这是动态的，用户可以在单个页面中任意多次包含该小部件。我用所需的文件和代码信息更新了帖子。请显示小部件代码。你做了什么调试？错误是什么？使用类而不是ID初始化选项卡。对于具有相同类的多个元素，可以正常工作。谢谢。下面是两个页面，展示了这个简单小部件的使用。如果我已经知道div id和widget的数量，这就不是问题。但这是动态的，用户可以在单个页面中任意多次包含该小部件。我用所需的文件和代码信息更新了帖子。谢谢你的解释。我在看这篇文章。同意，我需要更深入地学习基础知识。。我更像是一个后台人员。。但我们需要让它运作起来。我还上传了那篇文章中的示例代码，注意我有两个对小部件的调用，但是小部件只显示一次。。这就是我正在处理的问题。我从纯javascript开始，开始使用jquery。一个简单的工作小部件示例将有所帮助。谢谢。我把它弄清楚了。谢谢你的解释。我在看这篇文章。同意，我需要更深入地学习基础知识。。我更像是一个后台人员。。但我们需要让它运作起来。我还上传了那篇文章中的示例代码，注意我有两个对小部件的调用，但是小部件只显示一次。。这就是我正在处理的问题。我从纯javascript开始，开始使用jquery。一个简单的工作小部件示例将有所帮助。谢谢。我把它整理好了