Jquery和原型noconflict [英] Jquery and prototype noconflict
本文介绍了Jquery和原型noconflict的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
HTML
<！DOCTYPE html> ;
< html>
< head>
< title> Nor-Avetisyan< / title>
< link rel =stylesheettype =text / csshref =views / css / style.css/>
< link rel =stylesheethref =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>
函数setupCalendars（）{
//嵌入日历
Calendar.setup（
{
dateField：'embeddedDateField'，
parentElement：'embeddedCalendar'
）
//弹出日历
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-armhref =＃>< / a>
< a class =flag-enhref =＃>< / 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-glxavorhref =＃>< / a>
< a id =menu-mermasinhref =＃>< / a>
< a id =menu-usucichhref =＃>< / a>
< a id =menu-ashakerthref =＃>< / a>
< a id =menu-shrjanavartnerhref =＃>< / a>
< a id =menu-norutyunnerhref =＃>< / a>
< a id =menu-mankapartezhref =＃>< / a>
< a id =menu-nyuterhref =＃>< / a>
< a id =menu-bajanortagrvelhref =＃>< / 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 =embeddedExamplestyle =>
< div id =embeddedCalendarstyle =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-twitterhref =＃>< / a>
< a id =social-youtubehref =＃>< / a>
< a id =social-facebookhref =＃>< / a>
< a id =social-googlehref =＃>< / a>
< a id =social-dasaranhref =＃>< / a>
< / div>
< / div>
< div class =clear>< / div>
< a id =kaphref =＃>< / 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（）;但没有效果。
你可以为此发布任何解决方案吗？
解决方案
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' ）。隐藏（）;
jQ（'＃site-content-dproc'）。mouseover（function（）{
jQ（'＃corner-calq'）。fadeIn（1000）;
}）;
jQ（'＃site-content-dproc'）。mouseout（function（）{
jQ（'＃corner-calq'）。fadeOut（1000）;
}）;
尽管我可能更愿意将代码保持原样，但是在自我匿名匿名函数。
$ p $ （function（$）{
$（'＃corner-calq'）。hide（）;
$（'＃site-content-dproc'）。mouseover（function（）{
$（'＃corner-calq'）。fadeIn（1000）;
}）;
$（'＃site-content-dproc'）。mouseout（function（）{
$（'＃corner-calq'）。fadeOut（1000）;
}）;
}）（jQuery的）;
I got an conflict between jquery and prototype.
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>
Console Error: Uncaught TypeError: Cannot call method 'hide' of null
I have put the jQuery.noConflict(); but no effect.
Can you post any solutions for this?
解决方案
jQuery.noConflict() is not some magic dust that by some mysterious forces remove the conflicts between the libraries. Its purpose is quite clear: 1) restore the original value of $ global variable, and, optionally, 2) introduce another alias to be used instead of jQuery.
What you might need to do is the following:
<script src="views/js/prototype.js"></script>
<script src="views/js/jquery-2.0.1.min.js"></script>
<script>var jQ = jQuery.noConflict();</script>
Then you can use this jQ variable like you were using $:
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);
});
Although I'd probably prefer leaving the code as is, instead scoping it within a self-calling anonymous function.
(function($) {
$('#corner-calq').hide();
$('#site-content-dproc').mouseover(function() {
$('#corner-calq').fadeIn(1000);
});
$('#site-content-dproc').mouseout(function() {
$('#corner-calq').fadeOut(1000);
});
})(jQuery);
这篇关于Jquery和原型noconflict的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
