附加Jquery.min.js时发生Jquery冲突

时间:2014-08-16 09:03:21

标签: javascript jquery

我认为导致问题的原因是Jquery冲突。如果不是下面的情况,请在第一时间纠正我。

我是Jquery的新手,并尝试将下拉插件插入网站。尝试成功,但是当下拉工作时,已存在的Jquery图像滑块会消失。

我的代码如下所示。

与图像滑块插件相关的链接:

<script src="css/SliderOne/jquery.min.js"></script>
<script src="css/SliderOne/jquery.pepperk.js"></script>

<script>
$(window).load(function() {
$('.blueberry').blueberry();
});
</script>

以及下拉插件的链接;

<script src="pro_v/jqueryminx.js"></script>
<script src="js/homedrop/jqueryx.selectric.js"></script>
<script>
$(function(){
    $('select, .select').selectric();

    $('.customOptions').selectric({
        optionsItemBuilder: function(itemData, element, index){
            return element.val().length ? '<span class="ico ico-' + element.val() +  '">    </span>' + itemData.text : itemData.text;
        }
    });
});
</script>

当我删除jqueryminx.js链接时,图像滑块正常工作。所以我尝试按照一个stakoverflow问题的建议执行以下操作,但无法开始工作。

我的尝试如下。试图使用noConflict;

<script src="css/SliderOne/jquery.min.js"></script>
$.noConflict(true);
<script src="css/SliderOne/jquery.pepperk.js"></script>

<script>
$(window).load(function() {
$('.blueberry').blueberry();
});
</script>

也在这里。

<script src="pro_v/jqueryminx.js"></script>
$.noConflict(true);
<script src="js/homedrop/jqueryx.selectric.js"></script>
<script>
$(function(){
    $('select, .select').selectric();

    $('.customOptions').selectric({
        optionsItemBuilder: function(itemData, element, index){
            return element.val().length ? '<span class="ico ico-' + element.val() +  '">        </span>' + itemData.text : itemData.text;
        }
    });
});
</script>

似乎没有用。任何帮助将非常感激。谢谢。

1 个答案:

答案 0 :(得分:1)

要正确应用noConflict,您应该将noConflict放入脚本标记中。它将从全球范围中清除$变量。然后,您将通过jQuery引用jquery。

<script src="css/SliderOne/jquery.min.js"></script>
<script src="css/SliderOne/jquery.pepperk.js"></script>

<script>
$.noConflict(true);
jQuery(window).load(function() {
jQuery('.blueberry').blueberry();
});
</script>

或者你可以在这个contruct中使用$ variable internal来准备回调函数

jQuery( document ).ready(function( $ ) {
  // Code that uses jQuery's $ can follow here. In your case
 $('.blueberry').blueberry();
});