将 Jquery 无冲突代码添加到我当前的代码中
Adding Jquery no conflict code to my current code
我真的从来没有使用过jQuery,所以我需要你们的帮助。我有一个包含大量 Jquery 代码的模板。在我的模板中包含 AngularJs 后,我的幻灯片放映不时中断。我的朋友建议我,我应该尝试添加noConflict();
行。根据有关noConflict的文档,我应该创建一个变量,并将其附加到我的代码中,但我真的不知道如何。这是我创建幻灯片的jquery代码。
// on document ready
(function($){
"use strict";
var globalDfd = $.Deferred();
$(window).bind('load',function(){
// after loading all the scripts
globalDfd.resolve();
});
// camera slideshow
(function(){
var cs = $('.camera_wrap');
if(cs.length){
cs.camera({
height: '41%',
navigation: true,
pagination: true,
playPause:false,
thumbnails: false,
time: 4000,
transPeriod : 1000,
navigationHover: false,
onLoaded: function() {
var image = $('.camera_wrap .camera_src > [data-src]'),
len = image.length,
bullet = $('.camera_wrap .camera_pag_ul > li');
if(bullet.find('.custom_thumb').length) return;
for(var i = 0; i < len; i++){
bullet.eq(i).append('<div class="custom_thumb tr_all_hover"><img src="' + image.eq(i).data('custom-thumb') + '" alt=""></div>');
}
bullet.on("mouseenter mouseleave",function(){
$(this).children('.custom_thumb').toggleClass("active");
});
}
});
cs.find('.camera_prev').append('<i class="fa fa-angle-left"></i>');
cs.find('.camera_next').append('<i class="fa fa-angle-right"></i>');
}
})();
})(jQuery);
您能否提供示例,添加 noConflict 函数后此代码应如何显示。提前谢谢你。
我假设您已经经历了使用 noConflict() 的需要。以下是您的代码的外观
//Define you alias
var your_alias = $.noConflict(true);
(function() {
var cs = your_alias('.camera_wrap');
if (cs.length) {
cs.camera({
height: '41%',
navigation: true,
pagination: true,
playPause: false,
thumbnails: false,
time: 4000,
transPeriod: 1000,
navigationHover: false,
onLoaded: function() {
var image = your_alias('.camera_wrap .camera_src > [data-src]'),
len = image.length,
bullet = your_alias('.camera_wrap .camera_pag_ul > li');
if (bullet.find('.custom_thumb').length) return;
for (var i = 0; i < len; i++) {
bullet.eq(i).append('<div class="custom_thumb tr_all_hover"><img src="' + image.eq(i).data('custom-thumb') + '" alt=""></div>');
}
bullet.on("mouseenter mouseleave", function() {
your_alias(this).children('.custom_thumb').toggleClass("active");
});
}
});
cs.find('.camera_prev').append('<i class="fa fa-angle-left"></i>');
cs.find('.camera_next').append('<i class="fa fa-angle-right"></i>');
}
})();
如果您仍然遇到任何问题,也请告诉我。
> JQuery 使用 $ ,比如其他一些框架。为了确保没有冲突,您可以简单地将$替换为jQuery。
例如 :
$(".camera_wrap")成为jQuery('.camera_wrap')
提供的代码将能够在noConflict中很好地运行。因为它已经包装在一个jquery->$闭包中
相关文章:
- 将 jQuery 代码添加到 Index.aspx 页面
- Javascript代码添加了一些不应该存在的内容
- 将Google AdWords转换跟踪(javascript)代码添加到PrestaShop/Smarty页面中
- 向以下代码添加不接受“0”的另一个条件
- 如何为该代码添加回调函数
- 将javascript代码添加到URL
- jquery将HTML代码添加到页面中
- jQuery/can'我找不到避免代码添加类的方法
- 如何将我自己的验证代码添加到MooTools的lightface表单中
- 需要帮助将一些JavaScript代码添加到我的wordpress主题中
- 将 JQuery 或 Javascript(不是 coffee.script)代码添加到 Rails 3.2 应用程序中
- JQuery 悬停代码:添加 If 语句会破坏它
- 如何在jsp中单击按钮时将代码添加到jqPlot条形图另存为图像
- JavaScript 将代码添加到已经设置的事件中
- 仅将 Javascript 代码添加到最后一个文本区域
- 如何使用此示例使用 javascript 将代码添加到我的表单标签中
- 将 Jquery 无冲突代码添加到我当前的代码中
- 如何将自定义代码添加到prestashop
- 调试JavaScript和css代码:添加一个事件处理程序
- Dojo 使用 domConstruct 将声明性代码添加到现有手风琴中