jquery - 当我将代码移动到与 $(document).ready(function()){}) 分开的文件时，addClass 不起作用

Question

我有一个代码片段，我将在多个页面中使用它。此代码用于更新表中的列标题以显示列是按升序还是降序排序。我想放在一个单独的 .js 文件中，而不是在所有页面上复制它。该代码段在$("body").on("click") 函数。当我将它移动到它自己的函数并调用该函数时，脚本会执行，但是 addClass/removeClass 的结果不会保留到网页上。任何援助将不胜感激。我对 JQuery 很陌生，还没有找到任何直接的帮助。

jobStatus.js

$(document).ready(function () {
    $("body").on("click", ".serverSortTB .THSort", function () {
        // This is where I pulled out the code in the file below.

        fn_UpdateSortColumns();

        // Other code here to notify the Controller of the changes.
    });
}

filterSortBase.js

function fn_UpdateSortColumns() {
    $('.serverSortTB').find('.THSort').not(this).each(function () {
        if ($(this).hasClass("sorting_desc")) {
            $(this).removeClass("sorting_desc").addClass("sorting");

        }
        if ($(this).hasClass("sorting_asc")) {
            $(this).removeClass("sorting_asc").addClass("sorting");

        }
    });

    var s = $(this);
    if (s.hasClass("sorting_asc")) {

        s.removeClass("sorting_asc").addClass("sorting_desc");
    } else if (s.hasClass("sorting_desc")) {

        s.removeClass("sorting_desc").addClass("sorting_asc");
    } else {

        s.removeClass("sorting").addClass("sorting_asc");
    }
}

这两个 .js 文件都是 Index.html 文件中的脚本。使用调试器，我看到 fun_UpdateSortColumns 被调用并且可以单步执行它。

Answer 1

fn_UpdateSortColumns() 函数中的 this 指向函数的调用上下文。因为你这样调用它:

function () {
    fn_UpdateSortColumns();

调用没有调用上下文，所以 this 可能是全局范围。

您可以将 this 传递到您的函数中:

function () {
    fn_UpdateSortColumns(this);

或使用 .call() 应用正确的上下文:

function () {
    fn_UpdateSortColumns.call(this);