0

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

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"));
    });
}

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

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 函数）与当前不同，则文本（'#' + elemId +'-StatusTxt ' div 的内容）被正确更新/刷新为新的，但没有使用正确的颜色，我的意思是，字体颜色不会用新的颜色更新/刷新，新的文本仍然使用以前的颜色。

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

4

1 回答 1

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...
于 2013-10-31T16:36:20.007 回答