jquery 和 nivo 滑块冲突答案

【问题标题】：jquery and nivo slider conflictjquery 和 nivo 滑块冲突
【发布时间】：2014-02-06 13:22:26
【问题描述】：

我正在尝试在 joomla 2.5 站点中运行 nivo 滑块以及自定义 html+php 模块，我需要在其中放置日期选择器。

在自定义模块中，我插入以下代码：

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="css/datepicker.css" />
<?php
/* Here the code for the module */

Nivo 滑块插入此 html 代码：

<script type="text/javascript">
jQuery.noConflict();
jQuery(window).load(function() {
jQuery('#vt_nivo_slider196').nivoSlider({
effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
...
});
});
</script>

因此，使用此代码我看不到日历（日期选择器）并且 nivo 滑块不起作用（仅显示空白）。

如果我删除行 jQyery.noConflict();在 nivo 滑块代码中，我可以看到日历（日期选择器），但 nivo 滑块仍然不起作用（只显示一个空格）。

如果我删除带有 script type="text/javascript" src="js/jquery-1.4.2.min.js"> 的行，那么我可以看到 nivo 滑块工作，购买我看不到日历（日期选择器）。

在 datepicker.js 我有 $(document).ready(function() { $(function() { ('#linkedDatepicker') ... 更多代码和 (function($){$.extend($ .ui,{datepicker:{version:"1.7.2"}});var PROP_NAME="datepicker";function Datepicker(){ ... 更多代码

这似乎是与 JQuery 的冲突，但我不知道如何解决它。

非常感谢任何帮助。！

【问题讨论】：

标签： javascript jquery datepicker slider nivo-slider

【解决方案1】：

根据NivoSlider's website，需要jQuery 1.7+。

升级你的 jQuery 版本，最终升级你的 datepicker 版本，一切都会好起来的。

注意：jQyery.noConflict(); 仅适用于您在使用 jQuery 的同时使用另一个 javascript 库。

【讨论】：

感谢您的回答。我尝试使用 src="js/jquery-1.8.3.js"> 进行更新，但由于 nivo 滑块仅显示空白，因此出现了问题。由于 datepicker.js 中有自定义代码，例如 $(document).ready(function() { $(function() { ('#linkedDatepicker') 我想知道它是否与 nivo 滑块冲突。我试过也更新 jquery datepicker 代码，但它似乎并没有解决问题。
@user3279618 控制台有错误吗？我们可以在某处看到结果吗？

【解决方案2】：

感谢斯卡瓦尔的回答。

不确定发生了什么，但似乎经过多次试验后解决了。我认为它可能会帮助有类似问题的人，所以这里是我遵循的步骤：

1) 删除模块代码中的 jquery-1.4.2.min.js 调用，现在只调用 datepicker.js

2) 在 datepicker.js 中

2.1) 我之前有 $(document).ready(function() { $(function() { ('#linkedDatepicker') ... 更多代码，现在用链式 jQuery 替换了代码中的所有 $ 符号，所以现在代码看起来像 jQuery(document).ready(function() { ... 更多代码

我不知道为什么，但 $ 似乎出了点问题。

2.2) 我以前有 (function($){$.extend($.ui,{datepicker:{version:"1.7.2"}});var PROP_NAME="datepicker";function Datepicker(){ 。 .. 更多代码，现在替换为从 JQuery 站点下载的新日期选择器版本。jquery-ui-1.9.2.custom.min.js 添加了替换之前的代码（添加了来自 jquery-ui-1.9.2.custom.min 的代码.js 包括：jquery.ui.core.js、jquery.ui.datepicker.js)。现在代码以 function(e,t){function i(t,i){var ... 更多代码

最后一个问题是日历可视化进入了 nivo 滑块图像的背景，解决了更改 datepicker.css 添加 z-index 规则：#ui-datepicker-div { width: 180px; z-index:50 !important;}

【讨论】：