将 Jquery 无冲突代码添加到我当前的代码中

Adding Jquery no conflict code to my current code

本文关键字:代码 添加 Jquery 冲突      更新时间:2023-09-26

我真的从来没有使用过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->$闭包中