div的內容（文本）沒有被正確

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發送Ajax調用之前和Ajax調用來更新一個新的文本和字體顏色（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; 
} 

在網頁第一次按鈕被點擊它可以正常使用：文字與正確的字體顏色正確更新（我應該說，第一時間，瀏覽器歷史記錄和cookies，並且所有內容都會被刪除，但不會在下次）。一旦任務完成，在視圖頁面仍然是div內容中當前顏色的文本。現在，在這種狀態下，如果我通過單擊頁面中的按鈕再次執行ajax調用，並且msgType（作爲參數傳遞給setStatusTxt函數）與當前不同，文本（'＃'+ elemId +'--StatusTxt '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...