jQuery常用的功能在文件中

jQuery common functionality in file

本文关键字：文件 功能 常用 jQuery      更新时间：2023-09-26

我有一个c#。NET MVC3 web应用程序，我在我的页面中有一些常见的jQuery功能，并希望将其模块化。我不知道该怎么做。下面是我使用的代码示例。您将注意到，有几个控件具有分配给事件的函数。我拥有的每个视图都会这样做，但是控件(和控件的数量)将是不同的。需要添加事件的控件可能有1个，也可能有10个。

$(document).ready(function () {
    $('.datepicker').datepicker({ dateFormat: "mm/dd/yy", minDate: "12/27/2011" }); 
    $("#Description").keyup(function () {
        enableSaveAlert();
    });
    $("#DueDate").change(function () {
        enableSaveAlert();
    });
    $("#DueDate").keyup(function () {
        enableSaveAlert();
    });
});

    function enableSaveAlert() {
        document.title = document.title.replace("*", "");
        document.title = document.title + "*";
        return true;
    }

任何想法如何把它放入一个。js文件?

与其为每个输入元素设置一个Id选择器，不如在所有需要调用enableSaveAlert()函数的元素上设置一个类?

所以在HTML中，你要有

<input type="text" name="Description" class="save-alert" />
<input type="text" name="DueDate" class="save-alert" />
<input type="text" name="OtherField" />

然后在JS中，通过该类附加一次事件:

$(document).ready(function () {
    $('.datepicker').datepicker({ dateFormat: "mm/dd/yy", minDate: "12/27/2011" }); 
    $(".save-alert").bind("change keyup", function() {
        enableSaveAlert();
    });
});
function enableSaveAlert() {
    document.title = document.title.replace("*", "");
    document.title = document.title + "*";
    return true;
}

我建议将$(document).ready函数放在一个名为main.js的文件中，然后将该文件包含在模板视图的头部。

在你的索引或布局模板视图中你会有:

<html>
    <head>
        <script src="@Url.Content("~/Scripts/main.js")" type="text/javascript"></script>
    </head>
...

我认为将所有Javascript保存在组织良好的。js文件中总是一个好主意，而不是在任何单独的视图中。

相关文章：