jquery 打破另一个 javascript

Question

我使用的日期选择器默认带有 html 模板，一切正常，直到我使用自定义 jquery 使用单选按钮隐藏 div ...

这是我最喜欢的脚本

<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" ></script>
<script type='text/javascript' src='js/plugins/jquery/jquery-ui.min.js'></script>
<script type='text/javascript' src='js/plugins/jquery/jquery-migrate.min.js'></script>
<script type='text/javascript' src='js/plugins/jquery/globalize.js'></script>    
<script type='text/javascript' src='js/plugins/bootstrap/bootstrap.min.js'></script>
<script type='text/javascript' src='js/plugins/mcustomscrollbar/jquery.mCustomScrollbar.min.js'></script>
<script type='text/javascript' src='js/plugins/uniform/jquery.uniform.min.js'></script>
<script type='text/javascript' src='js/plugins/knob/jquery.knob.js'></script>
<script type='text/javascript' src='js/plugins/sparkline/jquery.sparkline.min.js'></script>
<script type='text/javascript' src='js/plugins/flot/jquery.flot.js'></script>     
<script type='text/javascript' src='js/plugins/flot/jquery.flot.resize.js'></script>
<script type='text/javascript' src='js/plugins.js'></script>    
<script type='text/javascript' src='js/actions.js'></script>    
<script type='text/javascript' src='js/charts.js'></script>
<script type='text/javascript' src='js/settings.js'></script>

如果我使用它，那么日期选择器工作正常但我的 jquery 不工作，我的 jquery 代码是

<script type="text/javascript">
    $(document).ready(function () {
        $("#vodn").trigger("click");
        $('#div1').hide('fast');
        $('#vod').click(function () {
            $('#div2').hide('fast');
            $('#div1').show('fast');
        });
        $('#vodn').click(function () {
            $('#div1').hide('fast');
            $('#div2').show('fast');
        });
    });
</script>

我的 jquery 只有在我的 jquery

之前调用这个 jquery.min.js 才有效

<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" ></script>

但问题是我的自定义 jquery 工作但日期选择器不工作（可能是因为我调用了 jquery.min.js 两次），我在做什么错误以及如何纠正它。 ..

编辑：我观察到当我使用 noconflict 时，我导入 jquery.min.js 的地方会影响页面，如果我在 js/plugins 之前导入它.js 然后我的日期选择器不工作，如果我在 plugins.js 之后导入它，那么我的自定义代码不工作

Answer 1

您的 jquery 文件有冲突。尝试执行以下操作：

var j = $.noConflict();

然后你通过变量j初始化你的日期选择器。

例如

j("#your-selector").datepicker();

Answer 2

在 jquery 脚本的第一行添加 noConflict

var $ = jQuery.noConflict();
$(document).ready(function () {
    $("#vodn").trigger("click");
    $('#div1').hide('fast');
    $('#vod').click(function () {
        $('#div2').hide('fast');
        $('#div1').show('fast');
    });
    $('#vodn').click(function () {
        $('#div1').hide('fast');
        $('#div2').show('fast');
    });
});

Answer 3

最好按名称传递 jQuery 对象，然后在里面使用 $:

jQuery(document).ready(function($){
   ...
});

此外，您可能希望在加载 jQuery 后立即迁移，如果这不起作用，您应该 post 控制台中显示的是什么错误。

我们无法神奇地确定您未显示（html 和未显示）的脚本有问题。可能是您使用 vod/vodn 来引用不存在的元素。

jquery 打破另一个 javascript

jquery breaking another javascript

html

javascript

jquery

jquery-ui

datepicker