2

如何在单个页面上使用多个 jquery 版本？我有两个不同的 jquery 版本，两者都是不同功能所必需的，但两个版本相互冲突。如果我将使用jquery noconflict，那么products scripts将无法工作？

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

Jquery 1.9.1 需要运行这个脚本

<script>
$(document).ready(function () {
$('input:checkbox').click(function(){
var $inputs = $('input:checkbox')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true); 
}else{
$inputs.prop('disabled',false);
}
})
})
</script>

<input type="checkbox">
<input type="checkbox"> 
<input type="checkbox">
<input type="checkbox">
<input type="checkbox" />

Jquery 1.4.2 需要运行这些脚本

<script type="text/javascript" src="products2/js/prototype.js"></script>
<script type="text/javascript" src="products2/js/common.js"></script>
<script type="text/javascript" src="products2/js/menu.js"></script>
<script type="text/javascript" src="products2/js/banner_pack.js"></script>
<script type="text/javascript" src="products2/js/light_box.js"></script>
<script type="text/javascript" src="products2/js/cloud-zoom.1.0.2.js"></script>
<script type="text/javascript" src="products2/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="products2/js/jquery.mix.js"></script>

问题现在解决了，这里是最终代码

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
(function ($) {
$(document).ready(function () {
$('input:checkbox').click(function(){
var $inputs = $('input:checkbox')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true); // <-- disable all but checked one
}else{
$inputs.prop('disabled',false); // <--
}
})
});
})(jQuery);
</script>

<script type="text/javascript"  
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="products2/js/prototype.js"></script>
<script type="text/javascript" src="products2/js/common.js"></script>
<script type="text/javascript" src="products2/js/menu.js"></script>
<script type="text/javascript" src="products2/js/banner_pack.js"></script>
<script type="text/javascript" src="products2/js/light_box.js"></script>
<script type="text/javascript" src="products2/js/cloud-zoom.1.0.2.js"></script>
<script type="text/javascript" src="products2/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="products2/js/jquery.mix.js"></script>
4

3 回答 3

5

由于它只有几行代码，我建议修改需要 jQuery 1.9.1 的块，以便它与 jQuery 1.4.2 一起使用

我在下面更新了它以使用 jQuery 1.4.2。我使用该attr方法而不是prop操纵属性（您可以在此处disabled查看文档以查看这是否可能导致任何问题）。该解决方案避免了运行两个 jquery 实例，并且避免了必须查找您已经在使用的所有库/插件的更新版本。

$(document).ready(function () {
    $('input:checkbox').click(function(){
        var $inputs = $('input:checkbox')
        if($(this).is(':checked')){
            $inputs.not(this).attr('disabled',true); 
        }else{
            $inputs.attr('disabled',false);
        }
    })
})

在这里看小提琴。

于 2013-04-16T23:52:25.417 回答
3

是的，在您加载第一个版本后，执行此操作

var $j = jQuery.noConflict();

加载第二个版本的 jQuery。

参考第一个版本$j和第二个作为$

于 2013-04-16T23:32:18.020 回答
0

好的，这是一种可能的解决方案 - 您可以将新版本的 jQuery 绑定到闭包。但我的建议是不要那样做，这就像向自己的腿开枪一样。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
// Jquery 1.9.1 Need To Run This Script:
<script type="text/javascript">
    (function ($) {
        $(document).ready(function () {
            // code that uses jQuery 1.9.1
        });
    })(jQuery);
</script>

// ...

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
//Jquery 1.4.2 Need To Run These Scripts:
<script type="text/javascript" src="products2/js/prototype.js"></script>
<script type="text/javascript" src="products2/js/common.js"></script>
// ...
于 2013-04-16T23:58:12.317 回答