前陣子工作遇到的問題趕緊記錄一下
情境:設計師在切版的時候使用了兩個版本會衝突的plugin分別是jquery.fixed.1.3.js和Feature Carousel, Version 1.3,這兩個plugin需要引入的jQuery有版本上的衝突
解決方法:使用jQuery.noConflict
一般來說,如果同一個頁面載入了多個jQuery,會依照順序覆蓋
<script src="https://code.jquery.com/jquery-1.10.2.js"></scrip> <script>console.log($.fn.jquery);</scrip> <script src="https://code.jquery.com/jquery-1.6.2.js"></scrip> <script>console.log($.fn.jquery);</scrip>
執行結果會是:
1.10.2 1.6.2
若加上jQuery.noConflict(true)
<script src="https://code.jquery.com/jquery-1.10.2.js"></scrip> <script>console.log($.fn.jquery);</scrip> <script src="https://code.jquery.com/jquery-1.6.2.js"></scrip> <script>jQuery.noConflict(true);</scrip> <script>console.log($.fn.jquery);</scrip>
執行結果則為:
1.10.2 1.10.2
因為jQuery.noConflict()的作用是轉讓jQuery的$變數控制權
Relinquish jQuery’s control of the $ variable.
$.noConflict( true ) from the second version will return the globally scoped jQuery variables to those of the first version.
接收jQuery.noConflict(true)的return值
<script src="https://code.jquery.com/jquery-1.10.2.js"></scrip> <script>console.log($.fn.jquery);</scrip> <script src="https://code.jquery.com/jquery-1.6.2.js"></scrip> <script>console.log($.fn.jquery);</scrip> <script> $jq162 = jQuery.noConflict( true ); console.log($jq162.fn.jquery); console.log($.fn.jquery); </scrip>
執行結果則為:
1.10.2 1.6.2 1.6.2 1.10.2
參考文件:https://api.jquery.com/jquery.noconflict/#jQuery-noConflict-removeAll