Question

我正在使用一个带有html模板的dematult的日期选择器，一切正常，直到我使用自定义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>

如果我使用这个，那么datepicker工作正常，但我的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正在运行但是datepicker无法正常工作（可能是因为我两次调用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之后立即迁移，如果这不起作用，您应该发布控制台中显示的错误。

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

jquery打破了另一个javascript

3 个答案: