Question

我正在尝试使用estalge视图框运行双滑块插件。他们都使用jQuery，并单独工作，但当我把它们放在一起时，一个打破。我试过实现jQuery没有冲突规则，但我想我可能会遗漏一个小细节。到目前为止我的编码看起来像：

<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="scripts/jquery.timers-1.2.js" type="text/javascript"></script>
<script src="scripts/jquery.dualSlider.0.3.js" type="text/javascript"></script>
<!-- START ESTALGE -->
<script src="js/jquery-1.6.2.min.js"></script>
<script src="js/jquery.etalage.min.js"></script>

<script type="text/javascript"> 

  $.noConflict();
  jQuery(document).ready(function($) {
                jQuery('#etalage').etalage();
            });

    $(".carousel").dualSlider({
                auto:true,
                autoDelay: 6000,
                easingCarousel: "swing",
                easingDetails: "easeOutBack",
                durationCarousel: 1000,
                durationDetails: 500

            });

    </script>

非常感谢任何帮助。谢谢

Answer 1

您错误地使用了noConflict。

<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>

<!-- INCLUDE ANY SCRIPTS HERE THAT RELY ON 1.3.2 -->

<script type="text/javascript"> 
    // HERE WE CAN USE 1.3.2

    // re-assign 1.3.2 to a new variable so we can use it later
    var $jq132 = $.noConflict();
</script>

<script src="js/jquery-1.6.2.min.js"></script>

<script type="text/javascript"> 

    // $ is now 1.6.2 and $jq132 is 1.3.2, both can be used.

</script>

Answer 2

您可以拥有多个jQuery版本，$.noConflict将返回jQuery对象。您需要将其另存为另一个变量。

<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-1.6.2.min.js"></script>
<script>
    $jq = $.noConflict();
    // $jq is jQuery 1.6.2
    // $ is jQuery 1.3.2
</script>

DEMO：http://jsbin.com/uhazan/3/edit#javascript,html,live

注意：jQuery变量将设置为1.6.2（第二个），如果您希望它为1.3.2（第一个），则将true传递给{{1 }}

P.S。您可能希望将$.noConflict放入$(".carousel").dualSlider。

Answer 3

尝试将slider置于jQuery(document).ready(function($) {});

之内

来自所有者site

Etalage是否支持jQuery无冲突模式？

插件本身就是noconflict准备好了。只需将"$"替换为启动插件的"jQuery"，如下所示：

jQuery(document).ready(function(){
    jQuery('#etalage').etalage();
});

Answer 4

$(".carousel").dualSlider({行在jQuery(document).ready()函数之外，我很确定这不是您的意图。目前，这将起作用：

jQuery.noConflict();
jQuery(document).ready(function($) {
    $('#etalage').etalage();

    $(".carousel").dualSlider({
        auto:true,
        autoDelay: 6000,
        easingCarousel: "swing",
        easingDetails: "easeOutBack",
        durationCarousel: 1000,
        durationDetails: 500
    });
});

但是，您的代码还存在其他问题。你带来了两个版本的jQuery，其中一个很老（1.3.2）。用这个你不会得到好结果。如果有一些库依赖于旧的jQuery，请考虑不使用该库。无论如何，它可能无法在此页面上正常工作，因为该库的任何运行时活动只能访问jQuery 1.6。 jQuery .noConflict docs提到你可以提供布尔true作为.noConflict的参数，以便释放jQuery关键字，但到那时，你加载的插件已经关闭了旧版本。

Answer 5

您不需要两个jQuery Core Lib包含

请改为尝试：

<script src="scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="scripts/jquery.timers-1.2.js" type="text/javascript"></script>
<script src="scripts/jquery.dualSlider.0.3.js" type="text/javascript"></script>
<!-- START ESTALGE -->
<script src="js/jquery.etalage.min.js" type="text/javascript"></script>

<script type="text/javascript"> 

 jQuery(document).ready(function($) {

 jQuery('#etalage').etalage();
 jQuery(".carousel").dualSlider({
            auto:true,
            autoDelay: 6000,
            easingCarousel: "swing",
            easingDetails: "easeOutBack",
            durationCarousel: 1000,
            durationDetails: 500

        });
});
</script>

Answer 6

如果必须使用多个版本的jquery，请使用

<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
    var jq132 = jQuery.noConflict();
</script>
<script src="js/jquery-1.6.2.min.js"></script>

现在调用旧版本的jquery，如

jq132('element').doSomething();

和更新版本的jquery可以如下

$('element').doSomething();

jQuery没有冲突仍然与其他版本的jQuery冲突

6 个答案: