JQuery / Script冲突问题

Question

我的aspx页面中有两个WebUsercontrols（.ascx）。一个用于幻灯片放映，另一个用于FullCalendar。两者在单独运行时工作正常，但是当我在同一页面中运行两个用户控件时发生冲突错误。如下：

错误描述是：

脚本是：

SlideShow.ascx

<script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
    function pageLoad(sender, args) {

        var $slides = $('.slide'),
         slideWidth = $slides.width(),
         numberOfSlides = $slides.length,
         speed = 5000,
         $holder = $slides.wrapAll('<div id="slidesHolder"></div>').css('float', 'left').parent().width(slideWidth * numberOfSlides);

        setInterval(changePosition, speed);

        function changePosition() {
            $holder.animate({
                'marginLeft': 0 - slideWidth
            }, function () {
                $holder.css('marginLeft', 0).children().first().appendTo($holder);
            });
        }

    }
</script>

FullCalendar.ascx

<script src="http://code.jquery.com/jquery-1.3.2.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui-1.7.3.custom.min.js" type="text/javascript"></script>
<script src="../Styles/fullcalendar.min.js" type="text/javascript"></script>
<script src="../Scripts/calendarscript.js" type="text/javascript"></script>

我试过noConflict。如果我使用noConflict，则其中一个脚本无效。

我对这个问题一无所知。请帮帮我。

Answer 1

删除后尝试运行：../Scripts/jquery-1.4.1.js

如果它正常，那么好吧

尝试将其放在页面底部

<script type="text/javascript">
    function pageLoad(sender, args) {

        var $slides = $('.slide'),
         slideWidth = $slides.width(),
         numberOfSlides = $slides.length,
         speed = 5000,
         $holder = $slides.wrapAll('<div id="slidesHolder"></div>').css('float', 'left').parent().width(slideWidth * numberOfSlides);

        setInterval(changePosition, speed);

        function changePosition() {
            $holder.animate({
                'marginLeft': 0 - slideWidth
            }, function () {
                $holder.css('marginLeft', 0).children().first().appendTo($holder);
            });
        }

    }
</script>

使用 <script>jQuery.noConflict();</script> 并从 jquery

替换 $ 一词

Answer 2

<script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>

包含jQuery之后，你应该调用$ .noConflict（）。这将从全局命名空间中删除“$”：

<script language="javascript">
    var $j = jQuery.noConflict();
</script>

此时，如果要调用jQuery代码，则应使用$ j而不是$。或者你可以通过在闭包中包装$符号来使用技巧

<script type="text/javascript">
    function pageLoad(sender, args) {

        var $jslides = $j('.slide'),
         slideWidth = $jslides.width(),
         numberOfSlides = $jslides.length,
         speed = 5000,
         $jholder = $jslides.wrapAll('<div id="slidesHolder"></div>').css('float', 'left').parent().width(slideWidth * numberOfSlides);

        setInterval(changePosition, speed);

        function changePosition() {
            $jholder.animate({
                'marginLeft': 0 - slideWidth
            }, function () {
                $jholder.css('marginLeft', 0).children().first().appendTo($jholder);
            });
        }

    }
</script>

希望这会有所帮助.. !!

快乐编码：）