javascript - 影响功能的头文件中 javascript 的排列

Question

我有一个站点，我在其中使用了一些 jquery 功能。 在主页上我使用了 Nivo Slider 插件，而在另一个页面上我使用了灯箱效果。

在我的 header.php 文件中的脚本链接排列中，我在 Nivo Slider 链接下有灯箱链接。灯箱有效，但 Nivo slider 无效。当我重新排列时， slider 起作用但灯箱不起作用。

在这种情况下 LightBox 工作，但 slider 不工作

<script type="text/javascript" src="js/jquery.nivo.slider.js"></script>

<script src="js/prototype.js" type="text/javascript"></script>      
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

这正常吗？我怎样才能让两者同时工作。

我的带有 slider 的主页是 Here

有灯箱的页面是here

谢谢。

Answer 1

由于来自很多地方的大量代码，有些东西停止工作。不能简单地假设添加少量单独工作的代码在集成在一起时也会工作。在这种特殊情况下，jQuery 和 Prototype 正在斗争。

这可以通过在顶部只加载一个 jQuery，然后包含这个小片段来解决:

jQuery.noConflict();

然后 jQuery 不再接管 $ 变量。 (您的代码还需要通过使用 jQuery 而不是 $ 来说明这一变化，但所有编写良好的插件都应该与这一变化良好地互操作。)

在那之后，您应该能够包含 Prototype 和您的其他插件。理论上，无论如何。

---

在实践中，Prototype hooks 了一些其他的东西。在您的特定情况下，它以 jQuery 插件不期望的方式 Hook Array. prototype. reverse ，并且不知何故，它导致堆栈溢出。我真的不知道如何在不破坏一个或另一个的情况下解决 Prototype 对该函数的劫持，因此您可能只想找到一个仅适用于 jQuery 的灯箱插件。