Question

我在单个html页面中使用多个JS脚本和jquery。这些脚本包括滑块，粘滞菜单，阴影框以及最终的图像预览脚本。 这个图像预览脚本是让其他脚本失败的脚本，它可以单独使用。它是在body标签之后插入的简单代码。

以下是代码：

<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function(jQuery){  

jQuery('#first a').imgPreview();

})(jQuery);
//]]>
</script>

完整的HEAD代码：

<script src="js/jsapi.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/html5.js" type="text/javascript"></script>

<script type="text/javascript" src="js/easySlider1.7.js"></script>

<script type="text/javascript">
jQuery.noConflict();
    $(document).ready(function(){   
        $("#slider").easySlider({
            auto: true, 
            continuous: true
        });
    }); 
</script>

<script src="js/scroll.inicio.js"></script>
<script src="js/jquery.scrollTo.js"></script>
<script src="js/jquery.nav.js"></script>
<script>
$(document).ready(function() {
   $('#sticky').onePageNav({
changeHash: true
  });
});
</script>

<script type="text/javascript">
function sticky_relocate() {
  var window_top = $(window).scrollTop();
  var div_top = $('#sticky-anchor').offset().top;
  if (window_top > div_top)
    $('#sticky').addClass('stick')
  else
    $('#sticky').removeClass('stick');
  }
google.setOnLoadCallback(function() {
  $(window).scroll(sticky_relocate);
  sticky_relocate();
  });
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-        2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src;         x.src=a[i+2];}
    }
    </script>

<script type="text/javascript" src="js/shadowbox.js"></script>

<script src="js/imgpreview.full.jquery.js" type="text/javascript"></script>

<script type="text/javascript">Shadowbox.init({ overlayOpacity: 0.9 });</script>

控制台显示此3个错误

Uncaught TypeError: Cannot call method 'replace' of undefined imgpreview.full.jquery.js:58
Uncaught TypeError: Property '$' of object [object Window] is not a function index.html:21
Uncaught TypeError: Property '$' of object [object Window] is not a function index.html:49

我需要找到冲突的位置以及如何解决冲突。

非常感谢

Answer 1

这将失败：

jQuery.noConflict();
// script after this fails
$(document).ready(function(){   
    $("#slider").easySlider({
        auto: true, 
        continuous: true
    });
});

使用得当：

jQuery.noConflict();
// script after this fails
(function($){   
    $("#slider").easySlider({
        auto: true, 
        continuous: true
    });
})(jQuery);

正确使用也可能是：

jQuery.noConflict();
(function($){  
     $('#first a').imgPreview();
})(jQuery);
//other library code here...

jQuery和JavaScript单脚本之间的冲突

1 个答案: