JavaScript不会更改或向元素添加CSS类

我正在为我的web应用程序使用C#ASP MVC、JavaScript和jQuery。 我现在有一个网格，你可以点击一行来选择项目。单击该项后，将出现一个名为

的css类。突出显示
，以确保选中该项

当我选择项目并单击按钮时，网格将刷新，这也很好。但是现在我想知道如何在刷新页面之前让它重新选择相同的项目

以下是我尝试过的：

 var $this = $selectedRow;
    if ($this.hasClass("row-simple")){
       // $(".highlight").removeClass("highlight");
        $this.addClass("highlight");
    }

单击按钮后，它将检查是否选择了一行，并执行此Ajax请求。您可以在函数末尾看到，我实际上正在再次尝试选择所选项目

function StartToTravel() {

    var $selectedRow = $(".highlight");
    if ($selectedRow.length == 1) {

        var id = $selectedRow.children(".td-dc")[0].innerText.trim();
        if (id) {
        $.ajax({
            type: 'post',
            url: appPath + '/service/StartTrip',
            data: {
               id: id
            },
            success: function (response) {
                if (response.success) {
                    RefreshGrid();

                }
                $("#dialog .modal-body").html(response.message);
                $("#dialog #dialog-title").html(response.title);
                $("#dialog").modal("show");




            },
            error: function (response) {
                $("#dialog .modal-body").html(msgErrorDuringRequest);
                $("#dialog #dialog-title").html(errorTitle);
                $("#dialog").modal("show");

            }
            });

        var $this = $selectedRow;
        if ($this.hasClass("row-simple") || $this.hasClass("highlight")) {
           // $(".highlight").removeClass("highlight");
            $this.addClass("highlight");
        }

        }
    }
}

刷新功能：

function RefreshGrid() {
    var numberPlate = $("#NumberPlate").val();
    var url = '/Service/Grid?numberPlate='+numberPlate;
    $("#Grid").load(url);
}

如何确保选择上一个选定的项目

按下按钮后：

关闭弹出行保持未选中状态时
正如mwebber在评论中已经解释的那样，加载的网格将完全替换以前的网格，因此一旦网格被替换，您对原始网格所做的所有更改都将不复存在。因此，您需要记住要影响哪一行，并在刷新网格后执行该修改

由于使用刷新网格，因此只需使用
complete
回调即可在完成后执行操作：

function RefreshGrid() {
    // …
    $("#Grid").load(url, null, reselectSelectedRow);
}

因此，在完成后，将调用
reselectedrow
。在该回调函数中，您需要具有选择逻辑：

function reselectSelectedRow() {
    // get the selected row using the row index
    // you might need to adjust this depending on your HTML
    var selectedRow = $('#Grid tr').get(_selectedRowIndex);

    if (selectedRow.hasClass("row-simple") || selectedRow.hasClass("highlight")) {
        selectedRow.addClass("highlight");
    }
}

现在只剩下确保在实际选择行时正确声明和设置
\u selectedRowIndex
。如前所述，您可以查询父元素中元素的索引，因此我们使用它

// declare the variable outside of the function so it exists on an outer scope
var _selectedRowIndex;

function StartToTravel() {
    var $selectedRow = $(".highlight");
    if ($selectedRow.length == 1) {
        // store the index of the selected row
        _selectedRowIndex = $selectedRow.index();

        // the other AJAX stuff…
    }
}

您正在用新的html数据替换网格内容。那可能行不通。如果您只需将if语句移到顶部，保存元素索引或
id
，然后在网格和ajax完成后添加类，就会更容易创建一个演示。。@mwebber完全正确，可以保存元素索引，也可以为这个选择找到一种特定的方法，之后您可以访问它refresh@mwebber我该怎么做？