个人中心
gpt4 book ai didi

Html 和 CSS 中的 Javascript 冲突

转载 作者：太空宇宙 更新时间：2023-11-04 04:41:29 27 4
gpt4 key购买 nike

我与我的 JS 发生冲突，因为其中一个脚本无法正常运行，我试图在我的文档中使用多个 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>

据我所知，可能是导致问题的“功能”。请帮忙......你怎么能避免这些问题，我敢肯定很多人一直在使用多个 js，你只是希望并祈祷它不会搞砸吗？

编辑:

<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>

最佳答案

清理源代码可能有助于调试过程。您可以创建一个单独的 javascript 文件，而不是使用文档正文/头部的脚本标签中包含的 javascript。将所有外部脚本标签放在文档的头部。包含上述所有代码的自定义 javascript 文件应最后调用。

您的点击/悬停功能应包含/绑定(bind)在您的 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 函数。除非它是您包含的众多库之一的一部分，因为它在您的展开和折叠功能中被调用。

希望这有助于...

关于Html 和 CSS 中的 Javascript 冲突，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15374792/

27 4 0
文章推荐： c - 如何在portaudio中实时更改参数
文章推荐： linux - 基本 Linux bash 命令说明 : awk and others
文章推荐： python - 如何将 Tcpreplay 添加为 C 语言或任何其他编程语言的库？
文章推荐： c# - 从应用程序构建操作系统
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com