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

Question

我认为我的问题的原因是 Jquery 冲突。如果情况并非如此，请首先纠正我。

我是 Jquery 新手，正在尝试将下拉插件插入到网站中。尝试成功，但是当下拉菜单工作时，现有的 Jquery 图像 slider 消失。

我的代码如下所示。

与图像 slider 插件相关的链接:

<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链接时，图像 slider 工作正常。因此，我尝试按照 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>

似乎不起作用。任何帮助将非常感激。谢谢。

Answer 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>

或者您可以在此结构中使用 $ 变量内部来准备回调函数

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