如果两个都在网页上使用,Jquery和Mootools通常会有冲突吗?(Does Jquery and Mootools usually have conflict if both are used

编程入门 行业动态 更新时间:2024-10-27 10:34:09
如果两个都在网页上使用,Jquery和Mootools通常会有冲突吗?(Does Jquery and Mootools usually have conflict if both are used on a webpage?)

我有这个网站正在设计,我尝试使用mootools 1.31动画一些div盒子,当点击或鼠标悬停时,显示内容。 问题是它似乎不适用于网页,但如果我在空白网页上尝试相同的脚本它可以工作,我想可能是因为我在同一页面上有Jquery 1.52并且可能两个脚本都相互冲突其他因为,如果我删除Jquery,Mootools工作。 什么应该是我的选择,因为我需要Jquery为我做一些验证,所以我不能完全删除它。

这是代码

<script> //-vertical var mySlide = new Fx.Slide('test'); $('slidein').addEvent('click', function(e){ e = new Event(e); mySlide.slideIn(); e.stop(); }); $('slideout').addEvent('click', function(e){ e = new Event(e); mySlide.slideOut(); e.stop(); }); $('toggle').addEvent('click', function(e){ e = new Event(e); mySlide.toggle(); e.stop(); }); $('hide').addEvent('click', function(e){ e = new Event(e); mySlide.hide(); e.stop(); }); </script>

这是HTML

<html> <h3 class="section">Fx.Slide Vertical</h3> <a id="slideout" href="#">slideout</a> | <a id="slidein" href="#">slidein</a> | <a id="toggle" href="#"> toggle</a> | <a id="hide" href="#">hide</a> <div id="test"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad mi nim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>

这是CSS

#test { background: #222; color: #fff; padding: 10px; margin: 20px; border: 10px solid pink; } #test2 { background: #222; color: #fff; padding: 10px; margin: 20px; border: 10px solid pink; }

我在他们自己的例子中使用了Mootools提供的完全相同的代码,如果我在一个空白的网页上这样做,但它可以合并到我自己的网页中,但它没有,我自己的页面只有Jquery的脚本标签HTML的头部分。

I have this website am designing, i tried using mootools 1.31 to animate some of the div boxes when clicked or when the mouse hover rounds it, to shows the content. the thing is that it doesn't seem to work on the webpage, but if i try the same script on a blank webpage it works, am thinking probably it's because i have Jquery 1.52 on the same page and maybe both scripts are conflicting with each other because, if i remove the Jquery, the Mootools works. What should be my option, because i need the Jquery to do some validations for me, so i can't remove it completely.

Here are the codes

<script> //-vertical var mySlide = new Fx.Slide('test'); $('slidein').addEvent('click', function(e){ e = new Event(e); mySlide.slideIn(); e.stop(); }); $('slideout').addEvent('click', function(e){ e = new Event(e); mySlide.slideOut(); e.stop(); }); $('toggle').addEvent('click', function(e){ e = new Event(e); mySlide.toggle(); e.stop(); }); $('hide').addEvent('click', function(e){ e = new Event(e); mySlide.hide(); e.stop(); }); </script>

here's the HTML

<html> <h3 class="section">Fx.Slide Vertical</h3> <a id="slideout" href="#">slideout</a> | <a id="slidein" href="#">slidein</a> | <a id="toggle" href="#"> toggle</a> | <a id="hide" href="#">hide</a> <div id="test"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad mi nim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>

Here's the CSS

#test { background: #222; color: #fff; padding: 10px; margin: 20px; border: 10px solid pink; } #test2 { background: #222; color: #fff; padding: 10px; margin: 20px; border: 10px solid pink; }

Am using the exact same code supplied by Mootools in their own example, if i do this on a blank webpage it works but incorporated into my own webpage, it doesn't, and my own page just have the script tag of the Jquery in the head section of the HTML.

最满意答案

$ function / object存在于两个库(MooTools和jQuery)中。 如果你想同时使用它们,你将不得不使用其中一个使用库名:例如jQuery('slideout').addEvent(...而不是$('slideout').addEvent(...

有用的链接:

http://api.jquery.com/jQuery/ http://docs.jquery.com/Using_jQuery_with_Other_Libraries

The $ function/object is present in both libraries (MooTools and jQuery). If you want to use both of them you will have to use one of them using library name: e.g. jQuery('slideout').addEvent(... instead of $('slideout').addEvent(...

Useful links:

http://api.jquery.com/jQuery/ http://docs.jquery.com/Using_jQuery_with_Other_Libraries

更多推荐

本文发布于:2023-07-28 23:22:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1310111.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:会有   都在   冲突   两个   网页

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!