结合这两个 HTML + JQuery 脚本页面合二为一
背景：
我正在使用 Intuit Web Designs 创建一个网站。在我看来，他们有一个非常奇怪的 HTML 设置，如下所示。 Intuit 允许我添加一个 HTML 框（用于粘贴 HTML 代码）。但是，该网站要求我将 标记内的所有内容粘贴到位于页面一侧的单独框中。
我正在尝试做什么： 我有两个功能齐全的 jQuery 脚本 - 每个脚本都写在单独的文档中。我将一份文档中的 html 上传到 Intuit 内部的 HTML 工具中。然后，我将 jQuery 脚本上传到 Intuit 中的特殊标题框中。一切都很完美。
现在是时候添加第二个文档（再次是 HTML 和 jQuery），因为我希望两个文档都在同一页面上运行。 html 上传得很好，但是当我将第二个 jQuery 脚本合并到第一个 jQuery 脚本中时，Chrome 控制台开始通知我 JQuery 脚本 #1 缺少文件（这是不可能的，因为在我添加第二个脚本之前它刚刚工作！） 。所以，总而言之，添加第二个脚本似乎让事情变得不正常。
这是我的两个文档（包括完整代码）：
文档 #1：
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<link href="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css">
<link href="test.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
$(document).ready(function() {
$("#fancyBoxLink").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 700,
'speedOut' : 200,
'overlayShow' : false
});
});
</script>
</head>
<body>
<center>
<p>
You can
<a href="#div_table" id="fancyBoxLink">Click here to see our various things</a>
</p>
</center>
<div style="display:none" >
<div id="div_table">
<table id="payment_options" summary="Payment Plans">
<colgroup>
<col class="poptions-odd">
<col class="poptions-even">
<col class="poptions-odd">
<col class="poptions-even">
</colgroup>
<thead>
<tr>
<th scope="col" id="poptions-features">Features</th>
<th scope="col" id="poptions-startup">Startup</th>
<th scope="col" id="poptions-value">Standard</th>
<th scope="col" id="poptions-premium">Premium</th>
</tr>
</thead>
<tbody>
<tr>
<td>Plan one</td>
<td>2</td>
<td>5</td>
<td>Unlimited</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
文档 #2：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>{ visibility: inherit; } The Fancybox Photo Gallery Demo #1</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="fancybox.js"></script>
<link href="images/fancybox.css" rel="stylesheet" type="text/css">
<link href="../photoGallery.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
$('html').addClass('js-on');
/* Fire Fancybox */
$(document).ready(function() {
$("a").fancybox({
'titleFormat':function(itemTitle, itemArray, itemIndex, itemOpts) {
return itemTitle + '<span> Image ' + (itemIndex + 1) + ' of ' + itemArray.length + '</span>';
}
});
});
</script>
</head>
<body>
<h1>Prote(C#)tion Photo Gallery</h1>
<div id="gallery">
<a href="../SlideShow/mainPage.png" rel="gallery" title="Authentication Page."><img src="../SlideShow/mainPage.png" alt="" id="first"><span></span></a>
<a href="../SlideShow/importSettings.png" rel="gallery" title="Import any previously saved settings."><img src="../SlideShow/importSettings.png" alt=""></a>
</div>
</body>
</html>
我向专家提出的最后一个问题！： 如何合并文档 1 和文档 2 的两个标题？这些标题脚本需要以某种方式组合起来，我相信这就是我的问题所在。
Background:
I am creating a website using Intuit Web Designs. They have, in my opinion, a very odd HTML setup which is as follows. Intuit allows me to add an HTML box (for pasting HTML code). However, the site requires me to paste anything within the <head></head> tags in a separate box located on the side of the page.
What I am attempting to do:
I have two fully functional jQuery scripts - each written in separate documents. I uploaded the html from one document into the HTML tool inside of Intuit. I then uploaded the jQuery scripts into the special headings box within Intuit. Everything worked perfectly.
Now it was time to add the second document (HTML and jQuery once again) as I wanted both documents to be running on the same page. The html uploaded fine, but as soon as I combine the second jQuery script into the first jQuery script, Chrome Console begins to inform me that JQuery Script #1 is missing files (impossible as it was just working before I added the 2nd script!). So, In conclusion, it seems as though adding the second script it made something go all out of whack.
Here are my two documents (Complete code included):
Document #1:
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<link href="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css">
<link href="test.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
$(document).ready(function() {
$("#fancyBoxLink").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 700,
'speedOut' : 200,
'overlayShow' : false
});
});
</script>
</head>
<body>
<center>
<p>
You can
<a href="#div_table" id="fancyBoxLink">Click here to see our various things</a>
</p>
</center>
<div style="display:none" >
<div id="div_table">
<table id="payment_options" summary="Payment Plans">
<colgroup>
<col class="poptions-odd">
<col class="poptions-even">
<col class="poptions-odd">
<col class="poptions-even">
</colgroup>
<thead>
<tr>
<th scope="col" id="poptions-features">Features</th>
<th scope="col" id="poptions-startup">Startup</th>
<th scope="col" id="poptions-value">Standard</th>
<th scope="col" id="poptions-premium">Premium</th>
</tr>
</thead>
<tbody>
<tr>
<td>Plan one</td>
<td>2</td>
<td>5</td>
<td>Unlimited</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Document #2:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>{ visibility: inherit; } The Fancybox Photo Gallery Demo #1</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="fancybox.js"></script>
<link href="images/fancybox.css" rel="stylesheet" type="text/css">
<link href="../photoGallery.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
$('html').addClass('js-on');
/* Fire Fancybox */
$(document).ready(function() {
$("a").fancybox({
'titleFormat':function(itemTitle, itemArray, itemIndex, itemOpts) {
return itemTitle + '<span> Image ' + (itemIndex + 1) + ' of ' + itemArray.length + '</span>';
}
});
});
</script>
</head>
<body>
<h1>Prote(C#)tion Photo Gallery</h1>
<div id="gallery">
<a href="../SlideShow/mainPage.png" rel="gallery" title="Authentication Page."><img src="../SlideShow/mainPage.png" alt="" id="first"><span></span></a>
<a href="../SlideShow/importSettings.png" rel="gallery" title="Import any previously saved settings."><img src="../SlideShow/importSettings.png" alt=""></a>
</div>
</body>
</html>
My final Question to the experts!:
How can I combine the two headings of documents 1 and documents 2? These heading scripts need to be combined somehow, I believe this is where my problem is.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
在查看您的 html 时，网络服务器文件系统中的两个文件的位置似乎不同。例如，fancybox.js 在第二个 html 中直接引用，而它应该是版本化的并且位于第一个 html 中的不同位置。为什么不显示结果 html，即您组合的 html？
While looking at your htmls, it seems locations of the two files in web server file system were different. For example, fancybox.js is directly referenced in the second html, while it is supposed to be versioned and in different location in the first one. And why don't you show the result html, the html you combined?