Question

我正在使用prototype.js作为灯箱窗口，jquery.validate.js用于同一窗口中的表单验证，但两个脚本都发生了冲突

我使用了noconflict功能，但只有工作表单验证的灯箱不能正常工作

灯箱脚本

<script type="text/javascript" src="javascripts/prototype.js"> </script>
<script type="text/javascript" src="javascripts/effects.js"> </script>
<script type="text/javascript" src="javascripts/window.js"> </script>
<script type="text/javascript" src="javascripts/window_effects.js"> </script>
<script type="text/javascript" src="javascripts/debug.js"> </script>

验证sctipt

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

Answer 1

如果你致电jQuery.noConflict();，它就不会将$与jQuery联系起来。

然后你只需使用jquery函数JQuery(element).html()和Prototype with $。

正如尼克所说，有一个灯箱jQuery插件，可以找到here

如果您确实需要同时使用这两者，则此answer会提供一些可能对您有帮助的信息。

但最好坚持使用一个库以避免麻烦。

Answer 2

解决方案：

<!--<script type="text/javascript" src="scripts/prototype.js"></script>-->
<!--<script type="text/javascript" src="scripts/lightbox.js"></script>-->       
<script type="text/javascript" src="scripts/mootools.js"></script>
<script type="text/javascript" src="scripts/swfobject.js"></script>
<script type="text/javascript" src="scripts/videobox.js"></script>    
<!--<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>-->    
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>   
<script type="text/javascript" src="scripts/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="scripts/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="scripts/jquery.fancybox-1.3.4.css" media="screen" />

<script type="text/javascript">
    jQuery.noConflict();
</script>

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('.boxgrid.caption').each(function () {
            jQuery(this).mouseenter (function() {
                jQuery(this).find(".cover").animate({top:'50px'}, {queue:false, duration:160});
            });     
            jQuery(this).mouseleave (function() {
                jQuery(this).find(".cover").animate({top:'150px'}, {queue:false, duration:160});
            });     
        });
        jQuery("a.external").fancybox();
    });
</script>

Answer 3

如果先放置<script src="jquery.js">（以及所有其他jQuery的东西），然后嵌入原型脚本，Prototype将覆盖jQuery定义的与Prototype冲突的任何内容（即。$将属于Prototype ）。然后，Lightbox可以通过$变量使用Prototype，您可以使用jQuery(...)代替$(...)来获取jQuery。

Details from jQuery docs

jquery.js与prototype.js冲突

3 个答案: