Question

我想知道是否有人可以告诉我是否可以在一个html文件中运行多个版本的jquery？即。

我有6个div，每个潜水包含一个不同的jquery插件。第一个插件运行在最新的jquery上。第二个由旧版本驱动，依此类推。

我试图将所有这些实现到一个html中，但是一旦我在脚本1下面实现脚本2，那么＃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>

Answer 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();

Answer 2

Here is an example of changing the jQuery namespace。您可以在不同的命名空间上运行旧版本，以避免冲突和混淆。

如何在一个HTML中运行多个版本的Jquery

2 个答案: