如何在一个 HTML 中运行多个版本的 Jquery [重复]
Posted
技术标签:
【中文标题】如何在一个 HTML 中运行多个版本的 Jquery [重复]【英文标题】：How to run multiple versions of Jquery in one HTML [duplicate] 【发布时间】：2013-03-19 05:08:14 【问题描述】：我想知道是否有人可以告诉我是否可以在一个 html 文件中运行多个版本的 jquery？即
我有 6 个 div，每个潜水包含一个不同的 jquery 插件。第一个插件在最新的 jquery 上运行。第二个由旧版本提供支持，依此类推。
我尝试将所有这些实现到一个 html 中，但是一旦我在下面实现脚本 2，脚本 1，那么 #1 就不再工作了，但是 #2 可以。只要我在 #2 下实现 #3，那么 #3 就会起作用，而上面的一切都会中断。
有没有特定的方法可以做到这一点？我曾尝试应用 noConflict 代码，但随后我分配给它的脚本停止工作。除非我做错了。
虽然我有关于使用 if 语句说，如果 var=plugin 1 被点击，取消所有其他 jquery 并且只为该特定插件播放 jquery。等等所有其他插件。但我不确定这是否可行。
我也考虑过使用单独的 $(document).ready();对于每个插件，但再次不确定这是否可行。
有谁知道我该如何解决这个问题？在过去的 3 天三夜里，我一直在与这头野兽战斗，我将永远欠你的债。
ps：我没有提供任何代码，因为它太多了，而且到处都是。如果你愿意，我可以。
谢谢
<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script src="jquery191.js"></script>
<!-- easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- liteAccordion js -->
<script src="js/liteaccordion.jquery.js"></script>
<script src="js/datepicker.js"></script>
<script ></script>
<script ></script>
<script ></script>
<script ></script>
<!-- liteAccordion css -->
<link href="css/liteaccordion.css" rel="stylesheet" />
<!-- liteAccordion js -->
<script type="text/javascript">
$(document).ready(function()
$('#div1').liteAccordion(
onTriggerSlide : function()
this.find('figcaption').fadeOut();
,
onSlideAnimComplete : function()
this.find('figcaption').fadeIn();
,
autoPlay : true,
pauseOnHover : true,
theme : 'stitch',
rounded : true,
enumerateSlides : true
).find('figcaption:first').show();
<!-- date picker js -->
$('#trip input#leavedate, #trip input#returndate').datepicker( dateFormat: 'D, M d, yy', showOn: 'button', buttonImage: 'calendar.gif', buttonImageOnly: true ); // format: Thurs, Jan 31, 2008, only show when the user clicks the calendar
);
</script>
// datepicker
<link rel="stylesheet" href="ui.datepicker.css"/>
<style type="text/css">
body font-family: verdana, arial, sans-serif; color: white; font-size: 0.8em;
#trip background-color: black; width: 500px;
#trip fieldset border-width: 1px; width: 470px;
#trip .fields padding: 25px; margin-bottom: 20px;
#trip div clear: both;
#trip label float: left; width: 165px;
#trip input float: left; width: 200px;
#trip .ui-datepicker-trigger float: left; width: 16px;
</style>
// datepicker
<script src="jq.js"></script>
<script type="text/javascript">
var jQuery_1_2_6 = $.noConflict(true);
</script>
<script language="JavaScript" src="jq.date.js"></script>
<script language="JavaScript">
</script>
// Style switch
<link rel="stylesheet" type="text/css" href="styles1.css" title="styles1" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="styles2.css" title="styles2" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="styles3.css" title="styles3" media="screen" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="styleswitch.js"></script>
<script src="/mint/?js" type="text/javascript"></script>
</head>
<body>
<div id="div1">
<ol>
<li>
<h2><span>Slide One</span></h2>
<div><p><img src="img-one/1.jpg">HELLO HELLOHELLOHELLOHELLO</p></div>
</li>
<li>
<h2><span>Slide Two</span></h2>
<div></div>
</li>
<li>
<h2><span>Slide Three</span></h2>
<div></div>
</li>
<li>
<h2><span>Slide Four</span></h2>
<div></div>
</li>
<li>
<h2><span>Slide Five</span></h2>
<div></div>
</li>
</ol>
<noscript>
<p>Please enable JavaScript to get the full experience.</p>
</noscript>
</div>
<br><br>
<!-- Date Picker -->
<div id="div2">
<form id="trip" action="#" >
<fieldset>
<legend>Trip Length</legend>
<div class="fields">
<div><label for="leavedate">Departure Date:</label> <input type="text" id="leavedate" name="leavedate"/></div>
<div><label for="returndate">Return Date:</label> <input type="text" id="returndate" name="returndate"/></div>
</div>
</fieldset>
</form>
</div>
<br><br><br><br>
<!-- Style Switcher -->
<div>
<h1>Stylesheet switcher using jQuery</h1>
<p>This is a simple example of my stylesheet switcher which is very simple thanks to the power of <a href="http://www.jquery.com/">jQuery</a>.</p>
<p><strong>Update 25/08/2006:</strong> Updated to work with persistant stylesheets and new version of jQuery (r226 from SVN) [thanks Andrea]</p>
<p><strong>Update 20/08/2006:</strong> Updated to work with new version of jQuery (r200 from SVN) ["*=style" replaced with "=*style*"]</p>
<p>
Currently active stylesheet:
<span id="st1">styles1</span>
<span id="st2">styles2</span>
<span id="st3">styles3</span>
</p>
<p>Choose a different stylesheet:</p>
<ul>
<li><a href="serversideSwitch.html?style=style1" rel="styles1" class="styleswitch">styles1</a></li>
<li><a href="serversideSwitch.html?style=style2" rel="styles2" class="styleswitch">styles2</a></li>
<li><a href="serversideSwitch.html?style=style3" rel="styles3" class="styleswitch">styles3</a></li>
</ul>
<p>Please view source to see how it works or see the <a href="http://www.kelvinluck.com/article/switch-stylesheets-with-jquery">full article</a> about this script for more information. You can download the relevant Javascript here: <a href="styleswitch.js">styleswitch.js</a>, <a href="jquery.js">jquery.js</a></p>
</div>
<!-- FOUR -->
<div>
</div>
</body>
</html>
【问题讨论】：
你不能。您只能拥有一个版本的 jquery。如果您想为某些插件提供向后支持，请使用 jquery migrate 插件。noConflict 正是为此目的。您应该包含您尝试过但不起作用的代码。
真的没有办法在相同版本的jquery（1.7）中找到这些插件吗？你用的是什么插件？
感谢您的帮助:) 是的，我学到了一个只能运行一个版本的艰难方法。
【参考方案1】：
应该很简单：
<script type='text/javascript' src='js/jquery.1.0.0.js'></script>
<script type='text/jvascript'>
var $jq1 = jQuery.noConflict();
</script>
<script type='text/javascript' src='js/jquery.2.0.0.js'></script>
<script type='text/jvascript'>
var $jq2 = jQuery.noConflict();
</script>
<script type='text/javascript' src='js/jquery.3.0.0.js'></script>
<script type='text/jvascript'>
$(document).ready(function()
console.log('constructed with jQuery 3.0.0');
);
</script>
但是，您必须确保正确的脚本在正确的范围内，通常您会执行以下操作：
$('#id').plugin();
这必须是，例如：
$jq1('#id').plugin();
【讨论】：
您好 Pendo，谢谢您的回答。我不明白你的代码。你能帮我再解释一下吗？如果有帮助，我还包含了我的 HTML 文件中的代码。谢谢！ 嗯，这个想法很简单。$jq2 = jQuery.noConflict(); 创建一个要使用的变量，而不是 jQuery 的默认 $ 方法。通过使用$jq2，您将根据示例使用版本 2.0.0 执行您的代码。
谢谢！我会试试这个，让你知道结果如何。【参考方案2】：
Here is an example of changing the jQuery namespace。您可以让旧版本在不同的命名空间上运行以避免冲突和混乱。
【讨论】：
我在原始帖子中包含了损坏的文件。我还将尝试将插件包含在每个单独的 HTML 文件中。所以你可以看到它们是如何工作的。如果您需要我包含任何其他 js/css 文件，请告诉我。感谢您的所有帮助！你们都太棒了！！！以上是关于如何在一个 HTML 中运行多个版本的 Jquery [重复]的主要内容，如果未能解决你的问题，请参考以下文章