Html＆CSS中的Javascript冲突

我与我的JS有冲突，因为其中一个脚本运行不正常，我试图在文档中使用多个JavaScript，我将使用三个，而我得到一个冲突已经和我只有两个文件中至今... :(Html＆CSS中的Javascript冲突

首先在head：

<script type="text/javascript" src="javascript/jquery_1.3.2.js"></script> 
<script type="text/javascript" src="javascript/jcarousel.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function() { 
    jQuery('#jcarouselMetro').jcarousel({ 
     scroll: 1, 
     wrap: 'both' 
    }); 
    jQuery('#jcarouselInvites').jcarousel({ 
     scroll: 1, 
     wrap: 'both' 
    }); 
}); 
</script>

其次在body：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script src="javascript/jquery-css-transform.js" type="text/javascript"></script> 
<script src="javascript/jquery-animate-css-rotate-scale.js" type="text/javascript"></script> 
<script> 
$('.item').hover(
    function(){ 
     var $this = $(this); 
     expand($this); 
    }, 
    function(){ 
     var $this = $(this); 
     collapse($this); 
    } 
); 
function expand($elem){ 
    var angle = 0; 
    var t = setInterval(function() { 
     if(angle == 1440){ 
      clearInterval(t); 
      return; 
     } 
     angle += 40; 
     $('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0); 
    },10); 
    $elem.stop().animate({width:'243px'}, 1000) 
       .find('.item_content').fadeIn(400,function(){ 
        $(this).find('p').stop(true,true).fadeIn(600); 
       }); 
} 
function collapse($elem){ 
    var angle = 1440; 
    var t = setInterval(function() { 
     if(angle == 0){ 
      clearInterval(t); 
      return; 
     } 
     angle -= 40; 
     $('.link',$elem).stop().animate({rotate: '+=40deg'}, 0); 
    },10); 
    $elem.stop().animate({width:'52px'}, 1000) 
       .find('.item_content') 
       .stop(true,true) 
       .fadeOut() 
       .find('p') 
       .stop(true,true) 
       .fadeOut(); 
} 
</script>

从我所看到的是可能导致问题的“功能”。请帮助......而且你怎样才能避免这些问题，我相信大量的人总是使用多个j，你只希望并祈祷它不会搞乱？

编辑：

<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="javascript/jquery.jcarousel.min.js"></script> 
<script type="text/javascript" src="javascript/jquery.jcarousel.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function() { 
    jQuery('#jcarouselMetro').jcarousel({ 
     scroll: 1, 
     wrap: 'both' 
    }); 
    jQuery('#jcarouselInvites').jcarousel({ 
     scroll: 1, 
     wrap: 'both' 
    }); 
}); 
</script>

来源

2013-03-13 BoneStarr

您使用的jQuery版本（1.3.2）是**古代**。 *编辑* - 啊，你试图导入两个不同版本的库。这通常是一个可怕的想法，如果可能的话，你应该花费精力摆脱对古董版本的任何依赖。 – Pointy 2013-03-13 00:22:08

@Pointy：可悲的是，有时候_client_是依赖... :-)。我不得不为一个公司的客户工作，直到今天，他们都在使用IE6 ......是的，IE6已经死了，但有些公司只是设置了他们的系统，不愿再看看他们 – 2013-03-13 00:27:41

@Pointy我更新了库，请在原始文章中查看编辑，并使用更新后的脚本没有发生任何变化，但仍然出现故障......我还使用更新后的库单独测试了脚本，并且它在您想知道的情况下运行良好。 – BoneStarr 2013-03-13 01:02:29

您可以使用此只加载库的一个版本。 1.3.2在所有其他浏览器上的IE6,7,8和1.9.1上。

<!--[if lt IE 9]> 
    <script src="jquery-1.3.2.js"></script> 
<![endif]--> 
<!--[if gte IE 9]><!--> 
    <script src="jquery-1.9.1.js"></script> 
<!--[endif]-->

来源

2013-03-13 00:35:04 GJK

不幸的是... – BoneStarr 2013-03-13 01:10:57

清理你的源代码可以帮助调试过程.. 而不是使用包含在文档的身体/头内script标签内的JavaScript的，你可以创建一个单独的JavaScript文件。将所有外部脚本标记放在文档头部。包含上面所有代码的自定义JavaScript文件应该最后调用。

您的click/hover函数应该包含/绑定在您的document.ready函数中。

另外，您正在调用重复脚本，jcarousel.js和jcarousel.min.js是相同的脚本。一个只是缩小版。你可能会因此而产生冲突，对于你的jquery调用也是如此。尝试使用jQuery的只有一个版本，即最新版本的scriptsrc.net

你生成的HTML文件，因此会是这个样子

<head> 
<!-- jquery --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" src="javascript/jquery-css-transform.js"></script> 
<script type="text/javascript" src="javascript/jquery-animate-css-rotate-scale.js"></script> 
<script type="text/javascript" src="javascript/jquery.jcarousel.min.js"></script> 

<!-- your custom js --> 
<script type="text/javascript" src="javascript/yourCustom.js"></script> 
</head>

那么你的自定义的js文件应该是这样..

function expand($elem) { 
    var angle = 0; 
    var t = setInterval(function() { 
     if (angle == 1440) { 
      clearInterval(t); 
      return; 
     } 
     angle += 40; 
     $('.link', $elem).stop().animate({ 
      rotate : '+=-40deg' 
     }, 0); 
    }, 10); 
    $elem.stop().animate({ 
     width : '243px' 
    }, 1000).find('.item_content').fadeIn(400, function() { 
     $(this).find('p').stop(true, true).fadeIn(600); 
    }); 
}//end expand 

function collapse($elem) { 
    var angle = 1440; 
    var t = setInterval(function() { 
     if (angle == 0) { 
      clearInterval(t); 
      return; 
     } 
     angle -= 40; 
     $('.link', $elem).stop().animate({ 
      rotate : '+=40deg' 
     }, 0); 
    }, 10); 
    $elem.stop().animate({ 
     width : '52px' 
    }, 1000).find('.item_content').stop(true, true).fadeOut().find('p').stop(true, true).fadeOut(); 
}//end collapse 


$(document).ready(function() { 

    //Carousel setup 
    $('#jcarouselMetro').jcarousel({ 
     scroll : 1, 
     wrap : 'both' 
    }); 
    $('#jcarouselInvites').jcarousel({ 
     scroll : 1, 
     wrap : 'both' 
    }); 
    //end carousel 

    //item hover function 
    $('.item').hover(function() { 
     var $this = $(this); 
     expand($this); 
    }, function() { 
     var $this = $(this); 
     collapse($this); 
    }); 
    //end hover 

});//end document ready

除此之外，您可能需要定义一个clearInterval函数。除非它是包含的许多库中的一部分，因为它在展开和折叠函数中被调用。

希望这有助于...

来源

2013-03-13 01:29:40 lukeocom

我可以看到冲突的JavaScript代码，这两个问题被列入两次。首先你加载相同这里转盘库的两个版本：

<script type="text/javascript" src="javascript/jquery.jcarousel.min.js"></script> 
<script type="text/javascript" src="javascript/jquery.jcarousel.js"></script>

首先是相同的代码的缩小版本。你只需要一个，所以删除上面的第二行，因为它不会被要求，它只是同一个文件的更大版本。这可能不会导致问题，但这是不对的。

其次，你的代码中有两个版本的jQuery，这也会导致重大的问题，因为你在页面的不同时间加载它们，它们将具有非常不同的功能。您可以修复此使用noConflict：

<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
    var jq142 = jQuery.noConflict(); 
    jq142(document).ready(function() { 
     jQuery('#jcarouselMetro').jcarousel({ 
      scroll: 1, 
      wrap: 'both' 
     }); 
     jQuery('#jcarouselInvites').jcarousel({ 
      scroll: 1, 
      wrap: 'both' 
     }); 
    }); 
</script>

第一行var jq142 = jQuery.noConflict();将确保您拥有jQuery的正确版本加载的旋转木马库。阅读noConflict documentation了解更多信息。

来源

2013-03-13 01:55:28

Html＆CSS中的Javascript冲突

回答

相关问题