0

我在 jquery 和原型之间遇到了冲突。

HTML 

<!DOCTYPE html>
<html>
    <head>
        <title>Nor-Avetisyan</title>
        <link rel="stylesheet" type="text/css" href="views/css/style.css" />
        <link rel="stylesheet" href="views/css/calendarview.css">
        <script src="views/js/jquery-2.0.1.min.js"></script>
        <script>jQuery.noConflict();</script>
        <script src="views/js/prototype.js"></script>
        <script src="views/js/calendarview.js"></script>
        <script>
            function setupCalendars() {
                // Embedded Calendar
                Calendar.setup(
                        {
                            dateField: 'embeddedDateField',
                            parentElement: 'embeddedCalendar'
                        }
                )

                // Popup Calendar
                Calendar.setup(
                        {
                            dateField: 'popupDateField',
                            triggerElement: 'popupDateField'
                        }
                )
            }

            Event.observe(window, 'load', function() {
                setupCalendars()
            })
        </script>
    </head>
    <body>
        <div id="site-page">
            <div id="site-under-header">
                <a class="flag-arm" href="#"></a>
                <a class="flag-en" href="#"></a>
                <div class="clear"></div>
            </div>
            <div id="site-header">
                <div id="site-header-center"></div>
            </div>
            <div id="site-content-container">
                <div id="site-menu">
                    <a id="menu-glxavor" href="#"></a>
                    <a id="menu-mermasin" href="#"></a>
                    <a id="menu-usucich" href="#"></a>
                    <a id="menu-ashakert" href="#"></a>
                    <a id="menu-shrjanavartner" href="#"></a>
                    <a id="menu-norutyunner" href="#"></a>
                    <a id="menu-mankapartez" href="#"></a>
                    <a id="menu-nyuter" href="#"></a>
                    <a id="menu-bajanortagrvel" href="#"></a>
                </div>
                <div id="site-content">
                    <div id="site-content-left">
                        <h1>ՆՈՐ ԿԱՌՈՒՑՎՈՂ ԴՊՐՈՑԱՇԵՆՔ</h1>
                        <div id="site-content-dproc">
                            <div id="corner-calq"><div><a href="#">Ավելին</a></div></div>
                        </div>
                    </div>
                    <div id="site-content-right">
                        <div id="embeddedExample" style="">
                            <div id="embeddedCalendar" style="margin-left: auto; margin-right: auto">
                            </div>
                        </div>
                        <div id="site-content-ushadrutyun">
                            Հատուկ ուշադրության 
                            արժանի
                            հայտարարությունների
                            նյութերի համար
                        </div>
                    </div>
                    <div style="clear:left;"></div>
                    <div id="site-content-news">
                        <h1>ՆՈՐՈՒԹՅՈՒՆՆԵՐ</h1>
                        <div class="site-news-grey">
                            1
                        </div>
                        <div class="site-news-grey">
                            2
                        </div>
                        <div class="clear"></div>
                        <div class="site-news-grey">
                            3
                        </div>
                        <div class="site-news-grey">
                            4
                        </div>
                    </div>
                    <div id="site-content-social">
                        <a id="social-twitter" href="#"></a>
                        <a id="social-youtube" href="#"></a>
                        <a id="social-facebook" href="#"></a>
                        <a id="social-google" href="#"></a>
                        <a id="social-dasaran" href="#"></a>
                    </div>
                </div>
                <div class="clear"></div>
                <a id="kap" href="#"></a>
                <div id="site-footer">
                    <div>
                        «Հայ կրթություն» կրթական հիմնադրամ
                        Երևան Հարավ-Արևմտյան Ա1 թաղամաս, Օհանով 20  Հեռ. 72 84 40
                    </div>
                </div>
            </div>
        </div>
        <script>
            $('#corner-calq').hide();
            $('#site-content-dproc').mouseover(function() {
                $('#corner-calq').fadeIn(1000);
            });
            $('#site-content-dproc').mouseout(function() {
                $('#corner-calq').fadeOut(1000);
            });
        </script>
    </body>
</html>

控制台错误：未捕获的 TypeError：无法调用 null 的方法“隐藏”

我已经把 jQuery.noConflict(); 但没有效果。

您可以为此发布任何解决方案吗？

4

1 回答 1

2

jQuery.noConflict()并不是一些神秘力量消除库之间冲突的魔法尘埃。它的目的很明确：1）恢复全局变量的原始值$，并且，可选地，2）引入另一个别名来代替jQuery.

您可能需要执行以下操作：

<script src="views/js/prototype.js"></script>
<script src="views/js/jquery-2.0.1.min.js"></script>
<script>var jQ = jQuery.noConflict();</script>

然后你可以jQ像以前一样使用这个变量$：

jQ('#corner-calq').hide();
jQ('#site-content-dproc').mouseover(function() {
    jQ('#corner-calq').fadeIn(1000);
});
jQ('#site-content-dproc').mouseout(function() {
    jQ('#corner-calq').fadeOut(1000);
});

尽管我可能更喜欢保留代码，而是将其范围限定在自调用匿名函数中。

(function($) {
    $('#corner-calq').hide();
    $('#site-content-dproc').mouseover(function() {
        $('#corner-calq').fadeIn(1000);
    });
    $('#site-content-dproc').mouseout(function() {
        $('#corner-calq').fadeOut(1000);
    });
})(jQuery);
于 2013-06-01T09:49:44.000 回答