Question

最初我动态创建一些如下所示的元素：

var newItem = '<div title="' + elem.IP + '" id="' + elem.Alias + '-Status" class="elementStatus"><div class="image" id="' + elem.Alias + '-StatusImg"></div><div id="' + elem.Alias + '-StatusTxt" class="text">Waiting...</div></div>';

稍后，我点击页面中的按钮后执行jquery ajax调用，如下所示：

function doTask(task, urlDoTask) {
    return ajax({
        url: this.getRootDir() + urlDoTask,
        data: { hostNameOrAddress: task.IP },
        beforeSend: setStatusTxt(task.Alias, 1),
        type: 'POST'
    }).then(function (data) {
        setStatusTxt(task.Alias, 2);
        return ok(createObject("status", "ok", "op", "doTask", "task", task, "data", "OK"));
    }, function (data) {
         setStatusTxt(task.Alias, 3);
        return ok(createObject("status", "fail", "op", "doTask", "task", task, "data", "KO"));
    });
}

我要做的是在发送之前通过调用setStatusTxt函数更新（elem.Alias +＆＃39; -StatusTxt＆＃39;）div的内容（文本），使用新的文本和字体颜色ajax调用和ajax调用完成（成功与否），见下文：

function setStatusTxt(elemId, msgType) {

    if (msgType === 1) {
        $('#' + elemId + '-StatusTxt').text("Ongoing...").addClass("hilightedStatusTxtOngoing");
    }
    else (msgType === 2) {
        $('#' + elemId + '-StatusTxt').text("OK").addClass("hilightedStatusTxtOK");
    }
    else {
        $('#' + elemId + '-StatusTxt').text("KO").addClass("hilightedStatusTxtKO");
    }

}

CSS ：

.hilightedStatusTxtOngoing
{
    color: inherit;
}

.hilightedStatusTxtOK
{
    color: Green;
}

.hilightedStatusTxtKO
{
    color: Red;
}

页面上的第一次按钮被点击它完美地工作：文本使用正确的字体颜色正确更新（我应该说第一次，浏览器历史记录和cookie，所有东西都被删除但下次没有删除）。任务完成后，在视图页面中保留div中内容的当前颜色的文本。现在，在这种状态下，如果我通过单击页面中的按钮再次执行ajax调用，并且msgType（作为参数传递给setStatusTxt函数）与当前文本（＆＃39;＃＆＃39; + elemId +＆＃39; -StatusTxt＆＃39; div的内容）正确地更新/刷新到新的但没有正确的颜色，我的意思是，字体颜色不会更新/刷新新的和新文本保留以前的颜色。

为什么文字颜色没有更新？

Answer 1

您需要从元素中删除其他类。

$('#' + elemId + '-StatusTxt').text("OK")
    .removeClass("hilightedStatusTxtOngoing")
    .removeClass("hilightedStatusTxtKO")
    .addClass("hilightedStatusTxtOK");

对所有三种消息类型执行此操作。

如果更简单，可以创建一个简短的帮助函数。

function changeStatus($e, className) {
    return $e.removeClass("hilightedStatusTxtOngoing")
      .removeClass("hilightedStatusTxtKO") 
      .removeClass("hilightedStatusTxtOK")
      .addClass(className);
}

并且这样打电话：

var $e = $('#' + elemId + '-StatusTxt');
if (msgType === 1) {
    changeStatus($e, "hilightedStatusTxtOngoing").text("Ongoing...");
} // and so on...

div的内容（文本）未正确刷新

1 个答案: