一个页面中包含多个jQuery版本

Question

我已将jQuery 1.10用于datePicker，将jQuery 1.9用于TimePicker（来自fgelinas.com）。

我用了noConflict();，但没有用。这是我的密码。

<link rel="stylesheet" href="~/Content/Admin/time-picker/include/ui-1.10.0/ui-lightness/jquery-ui-1.10.0.custom.min.css" type="text/css" />
<link rel="stylesheet" href="~/Content/Admin/time-picker/jquery.ui.timepicker.css?v=0.3.3" type="text/css" />
<script src="~/Content/js/jquery.js"></script>
<script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>
<script type="text/javascript" src="~/Content/Admin/time-picker/include/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="~/Content/Admin/time-picker/include/ui-1.10.0/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="~/Content/Admin/time-picker/include/ui-1.10.0/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="~/Content/Admin/time-picker/include/ui-1.10.0/jquery.ui.tabs.min.js"></script>
<script type="text/javascript" src="~/Content/Admin/time-picker/include/ui-1.10.0/jquery.ui.position.min.js"></script>
<script type="text/javascript" src="~/Content/Admin/time-picker/jquery.ui.timepicker.js?v=0.3.3"></script>
<script>
    $(function () {
        $("#datepicker").datepicker();
    });
    $.noConflict();
    $('#datepicker').datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: "dd-mm-yy",
        constrainInput: true,
        yearRange: "1999:2025",
        onSelect: function () {
            alert($('#datepicker').val());
        }
    });
</script>
<div>
    <label for="timepicker.[1]">Default time picker :</label>
    <input type="text" style="width: 70px;" id="timepicker.[1]" value="" />
    <script type="text/javascript">
        $(document).ready(function () {
            $('#timepicker\.\[1\]').timepicker({
                showAnim: 'blind'
            });
        });
    </script>
</div>
<div>
    <input type="text" class="form-control" id="datepicker" />
</div>

当我尝试在timePicker中使用$.noConflict()时，它不允许使用任何控件。但上面的代码只是让我们使用datePicker。当我删除datePicker脚本时，timePicker会完美运行。我必须在一页纸上同时使用它们。帮我做这个。谢谢

Answer 1

如果您阅读noConflict文档，可以选择将以前的jQuery保存到如下变量中：var j = $.noConflict();因此，如果要使用第一个加载的jQuery版本，可以使用美元符号，但如果需要最后加载的版本，则需要使用j。

在您当前的代码中，您先加载jquery库1.10，然后加载1.9，并调用noConflict，因此美元符号为1.10jquery版本。

<script>
    $(function () {
        $("#datepicker").datepicker();
    });
    var lastJQuery = $.noConflict();
    $('#datepicker').datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: "dd-mm-yy",
        constrainInput: true,
        yearRange: "1999:2025",
        onSelect: function () {
            alert($('#datepicker').val());
        }
    });
</script>
<div>
    <label for="timepicker.[1]">Default time picker :</label>
    <input type="text" style="width: 70px;" id="timepicker.[1]" value="" />
    <script type="text/javascript">
        lastJQuery(document).ready(function ($) {
            $('#timepicker\.\[1\]').timepicker({
                showAnim: 'blind'
            });
        });
    </script>
</div>

Answer 2

尝试移动$(selector).datepicker(options)并且$(selector).timepicker(options)调用到页面底部。。此外，我在$.noConflict（）中发现了一些奇怪的行为。这有必要吗？

更新：这可能对你有用吗？