1

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

我有 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>
4

2 回答 2

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(); 
于 2013-03-28T16:37:57.607 回答
0

这是更改 jQuery 命名空间的示例。您可以让旧版本在不同的命名空间上运行,以避免冲突和混乱。

于 2013-03-28T16:37:45.417 回答