Jquery Conflict给出了错误 [英] Jquery Conflict which gives error
问题描述
处理具有各种功能的项目,例如
Working on an project which has variety of functionality in it such as,
- Google翻译
- Image Slider [使用galleriffic]
- 弹出窗口[使用阴影框]
- JavaScript水平菜单栏*
- Google translator
- Image Slider [galleriffic used]
- Popup window [Shadow box used]
- JavaScript horizontal menu bar*
现在我们在其中遇到jquery冲突和错误消息,例如
我知道当代码找不到jquery时会出现这样的消息文件,但文件存在。
以下是项目中使用的文件列表
这是谷歌翻译所需要的
Here are the list of files used in the project This is needed by the google translator
1.<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
2. <script type="text/javascript" src="//jquery-translate.googlecode.com/files/jquery.translate-1.3.7.min.js"></script>
3. <script type="text/javascript" src="/scripts/jQuery/jquery.cookie.js"></script>
4. <script type="text/javascript" src="/scripts/jquery.bt.js"></script>
5. <script type="text/javascript" src="/scripts/jquery-ui-1.8.21.custom.min.js"></script>
6. <script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
7. <script type="text/javascript" src="/scripts/common.js"></script>
这个是滑块
1. <script type="text/javascript" src="/SliderBox/js/jquery-1.3.2.js"></script>
2. <script type="text/javascript" src="/SliderBox/js/jquery.galleriffic.js"></script>
3. <script type="text/javascript" src="/SliderBox/js/jquery.opacityrollover.js"></script>
这是针对弹出窗口的
1. <script type="text/javascript" src="/SliderBox/js/prototype.js"></script>
2. <script type="text/javascript" src="/SliderBox/js/effects.js"></script>
3. <script type="text/javascript" src="/SliderBox/js/lightwindow.js"></script>
4. <script type="text/javascript" src="/SliderBox/shadowbox/shadowbox.js"></script>
横向菜单需要这样做
1. <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
2. <script src="../scripts/jquery.als-1.1.min.js" type="text/javascript"></script>
3. <script src="../scripts/settingsEN.js" type="text/javascript"></script>
我已经优化了所有这些并且只包含了一个jquery-1.9.1的jquery文件.min.js
但仍无法清除冲突
以下是我使用的序列
1. <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
2.<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
3. <script type="text/javascript" src="//jquery-translate.googlecode.com/files/jquery.translate-1.3.7.min.js"></script>
4. <script type="text/javascript" src="/scripts/jQuery/jquery.cookie.js"></script>
5. <script type="text/javascript" src="/scripts/jquery.bt.js"></script>
6. <script type="text/javascript" src="/scripts/jquery-ui-1.8.21.custom.min.js"></script>
7. <script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
8. <script type="text/javascript" src="/scripts/common.js"></script>
9. <script type="text/javascript" src="/SliderBox/js/jquery.galleriffic.js"></script>
10. <script type="text/javascript" src="/SliderBox/js/jquery.opacityrollover.js"></script>
11.<script type="text/javascript" src="/SliderBox/js/prototype.js"></script>
12. <script type="text/javascript" src="/SliderBox/js/effects.js"></script>
13. <script type="text/javascript" src="/SliderBox/js/lightwindow.js"></script>
14. <script type="text/javascript" src="/SliderBox/shadowbox/shadowbox.js"></script>
15.<script src="../scripts/jquery.als-1.1.min.js" type="text/javascript"></script>
16. <script src="../scripts/settingsEN.js" type="text/javascript"></script>
我已尝试过所有这些
< a href =http://api.jquery.com/jQuery.noConflict/ =nofollow noreferrer> http://api.jquery.com/jQuery.noConflict/
http://www.w3schools.com/jquery/jquery_noconflict.asp
我已经尝试了所有这些
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
或
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
或
jQuery.noConflict();
(function($) {
$(function() {
// more code using $ as alias to jQuery
});
})(jQuery);
// other code using $ as an alias to the other library
但仍然无法使用得到解决方案
but still not able to get the Solution
当我删除这个滑块代码时,每件事都运行正常,没有错误但滑块不起作用
When I remove this code of slider, every thing works fine , no errors but the slider will not work
<!--script for slider--->
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '', 'float' : 'right'});
$('div.content').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 15,
preloadAhead: 10,
enableTopPager: true,
enableBottomPager: true,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
random: true,
prevLinkText: '',
nextLinkText: '',
nextPageLinkText: '',
playLinkText: '',
pauseLinkText: '',
prevPageLinkText: '',
enableHistory: false,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
}
});
});
</script>
<!--script end--->
任何人都可以帮忙吗?
推荐答案
我选择了这个流程并且错误已经解决了。 不需要任何.noConflict()和!!!
1)<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
2)<script type="text/javascript" src="//jquery-translate.googlecode.com/files/jquery.translate-1.3.7.min.js"></script>
3)<script type="text/javascript" src="/scripts/jQuery/jquery.cookie.js"></script>
4)<script type="text/javascript" src="/scripts/jquery.bt.js"></script>
5)<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
6)<script type="text/javascript" src="/scripts/common.js"></script>
7)<script src="/scripts/jQuery/insert_active_flash.js" type="text/javascript"></script>
8)<script type="text/javascript" src="/SliderBox/js/jquery.galleriffic.js"></script>
9)<script type="text/javascript" src="/SliderBox/js/jquery.opacityrollover.js"></script>
10)<script type="text/javascript" src="/SliderBox/shadowbox/shadowbox.js"></script>
11)<script type="text/javascript" src="/scripts/jquery.als-1.1.min.js"></script>
12)<script type="text/javascript" src="/scripts/settingsEN.js"></script>
与prototype.js发生冲突的缩小版本javascript。我刚删除了prototype.js文件并按顺序排列了所有参考文件[序列很重要]
The minified version javascript where having conflict with prototype.js. I just removed the prototype.js file and arranged all reference file in sequence [Sequence matters a lot]
现在错误是删除我仍然想知道prototype.js ???
这篇关于Jquery Conflict给出了错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!