我是不是使用 jQuery noconflict 来避免插件冲突？

Posted 2023-02-23

【中文标题】我是不是使用 jQuery noconflict 来避免插件冲突？

【英文标题】：Do I use jQuery noconflict to avoid plugins conflict?我是否使用 jQuery noconflict 来避免插件冲突？

【发布时间】：2011-03-07 03:34:29

【问题描述】：

---

更新：我发现jquery.bxslider 插件本身会克隆并附加/前置导致问题的 LI。没有解决方案，除了可能使用另一个脚本:(

---

我不得不让 jQuery 插件部分相互冲突，Boxslider（图像滑块）和 Colorbox（灯箱）。它们都有效，但滑块脚本以某种方式向灯箱广告，因此第一张和最后一张图像重复两次。

如果您查看example page，这将更容易理解。

您会看到滑块中有 3 张图片，但打开灯箱时会显示 5 张图片。

我已经用noconflict() 试试运气，但这只是阻止了任何工作。经过一番搜索，我假设存在一些命名空间问题，但我不知道在哪里或如何调试它。

我使用的脚本是

<link type="text/css" media="screen" rel="stylesheet" href="assets/css/colorbox.css" />
<script type="text/javascript" src="assets/js/jquery.bxslider2.0.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
    $('#gallery').bxSlider(
        auto: true,
        wrapper_class: 'gallery-holder',
        auto: false,  
        speed: 100,
        pager: true,
        next_text: 'next',
        prev_text: 'back'
    );
); 
</script>
<script type="text/javascript" src="assets/js/jquery.colorbox-min.js"></script>
<script type="text/javascript">
    $(window).load(function()
        $("#gallery a[rel='group']").colorbox(maxWidth:"80%", maxHeight:"80%", scalePhotos: true);
    );
</script>

我尝试过交换订单，但这只会导致一个或两个停止工作。我已经浪费了很多时间试图确定这一点，所以任何帮助将不胜感激！

【问题讨论】：

$.noConflict 用于消除与其他 JavaScript 库的冲突，而不是 jQuery 插件之间或其他与变量名相关的冲突。

顺便说一句，在 bx 插件上很好找！我从来没有听说过他们，但他们看起来做得很好。我想我可能会将一两个项目切换到 bxCarousel！

谢谢。有趣的是，有时很难找到一个做得好的插件。

【参考方案1】：

迟到总比没有好，是吗？我想我会分享我的解决方案，以防其他人遇到这个问题。

我最近一直在使用 colorBox/bxSlider 组合并且遇到了这个问题。当您初始化 bxSlider 时，它会将第一张和最后一张幻灯片复制到最后一张和第一张位置（分别）。我不太关心为什么，但我想它是为了支持循环。虽然首先初始化 colorBox 理论上应该可以工作，但 bxSlider 中的某些东西会擦除 colorBox 设置的 $.data()。

言归正传，我的快速解决方法是从重复的元素中删除类名。在 setChildrenLayout() 中，您可以看到项目在两个 $.each() 块中的前置/后置状态。您所要做的就是修改它以删除有问题的类名。

$.each($prependedChildren, function(index) 
    var moddedChild = $(this);
    moddedChild.children().removeClass("removeThisClass");
    $parent.prepend(moddedChild);
);

注意：我为我的特殊情况编写了它，如果您的列表项更复杂，它可能需要修改。

【讨论】：

恭喜修复。如果可以，请将您的答案标记为已接受，以便其他人可以从您的解决方案中学习。干杯~

【参考方案2】：

发生的情况是两个脚本都试图对同一组图像进行操作，并且只是让彼此中断。

Noconflict 基本上去掉了 $ 的定义，这样其他使用 $ 的库，比如 Prototype，就不会被覆盖了。

因此，noconflict 在这里对您没有帮助。只使用其中一个插件怎么样？

【讨论】：

好的。我知道它的主要目的（其他库）。我希望我也可以在插件之间使用它。而且插件有不同的用途（滑块和灯箱），所以我必须继续使用。

【参考方案3】：

当您在 Firebug 中查看页面的源代码时，虽然 Slider 仅显示三张图片，但实际上那里有 5 个 LI。您用于添加图像的选择器会找到五个元素。

console.log($("#gallery a[rel='group']")); // yields....
>> [a.cboxElement B10_02.jpg, a.cboxElement  B10_01.jpg, a.cboxElement  B10_04.jpg, a.cboxElement  B10_02.jpg, a.cboxElement  B10_01.jpg] 

这个数组有五个元素，这就是颜色框有 5 个图像的原因。

查看Curl获取的源，在任何JS运行之前，最初只有三个图像，BLADE/B10_02.jpg、B10_04.jpg和B10_01.jpg。因此，我想目标是查看何时添加这些内容。用于颜色框的实际图像存储在作为第一个子元素附加的单独区域中，那么将这些图像添加到滑块 UL 是什么？

当您完全移除颜色框并初始化滑块时，请在 Firebug 中检查库 UL。它有原来的三个 LI，还是五个？如果它有五个，colorbox（或其他东西）出于某种原因添加了另外两个。如果有 3 个，请尝试重新添加颜色框初始化，并在重新加载页面时查看是否有 5 个。这应该稍微缩小一下添加这些内容的范围。

补充： 从源代码来看，bxSlider 似乎故意复制了第一项和最后一项。

var first = $this.children(':first').clone(); 
var last = $this.children(':last').clone(); 
/*etc, etc */
$this.append(first).prepend(last);

我建议尝试在 Slider 之前运行 colorbox 插件。当然，如果您更改源顺序，它不会首先运行，因为您在滑块上有 document.Ready()，在颜色框上有 window.load()。您可以在 Slider 执行之前在 document.ready() 中执行颜色框吗？

【讨论】：

我现在完全移除了彩盒。是的——在 Firebug 中检查库 UL 确实显示了五个 LI。我已经更新了实时测试页面，您可以自己查看。

在 Firebug 中查看 bxslider 主页本身也会发现那里还有额外的 2 个 LI！

哦，您已经注意到我所做的和更新的相同的事情。尝试先在 window.load() 之外运行它！