如果聲明不能使用jQuery

我有一個變量從一個div中獲取文本。我使用if語句比較該文本，然後將CSS應用於該文本，具體取決於它是true還是false。出於某種原因，我無法讓它工作。該變量正在獲取正確的文本，因爲我通過console.log進行了驗證，但if語句不起作用。這裏是我的代碼：如果聲明不能使用jQuery

$(document).ready(function(){ 
    var singleStatus = $('.single-status').text(); 
    console.log(singleStatus); // This outputs 'Pending' to the console 
    if(singleStatus === 'Pending'){ 
     $('.single-status').css('color', '#f2721d'); // This does nothing 
     console.log(singleStatus); // This does nothing... 
    } 
});

來源

2014-11-05 dericcain

你在控制檯得到一個錯誤？ – Markai 2014-11-05 17:12:39

你能重現此錯誤，在堆棧段在這裏，或其他地方使用[JS小提琴（http://jsfiddle.net/）？這看起來很實用。 – 2014-11-05 17:12:47

'$ .trim（）'用於刪除文本週圍任何不需要的空白字符串。 – 2014-11-05 17:13:37

發佈我原來的答案評論...

假設在文本的空白content：

The控制檯日誌記錄最常見的問題是，您看不到很多空白。傳統上，空白字符是提供格式但不可見的字符。這些包括Space,Tab,Carriage return & Line feed。

你DIV最有可能有一個回車符，或者空格或製表符，在它周圍Pending（通常爲美化在大多數編輯器HTML的結果）：

例如它實際上可能是這樣的：

<div>Pending 
</div>

或

<div>Pending </div>

甚至

<div> 
    Pending 
</div>

和text()返回所有文本內容包括空格。

解決方案：

使用$.trim比較之前刪除不需要的空白：

if($.trim(singleStatus) === 'Pending'){

你不想使用string.trim()因爲不是所有的瀏覽器都支持它。這就是爲什麼jQuery提供靜態的$.trim()方法。

注：作爲text()返回一個字符串（或未定義）改變比較==將對這個問題沒有影響。

來源

2014-11-05 17:23:55

很抱歉的等待。我正在吃午飯，一旦我回來就會測試它。我在想你的答案可能是正確的。我已經嘗試過==，它呈現相同的結果。 – dericcain 2014-11-05 17:25:34

我認爲這沒什麼區別，但我只是在'=='上測試了我自己的理論。很棒的筆記，我其實剛剛採取了相反的做法。 – 2014-11-05 17:31:03

@Jonathon Hibbard：從什麼時候開始==不區分大小寫？ :) http://jsfiddle.net/TrueBlueAussie/fgea3onb/ – 2014-11-05 17:31:11

這裏可能是一些問題。

您可能需要執行一些操作，例如將值轉換爲小寫（singleStatus.toLowerCase()），修剪所有空白（使用正則表達式替換或類似的東西）並確保其他任何內容（如html或其他）可能會導致字符串不等於。您需要在之前完成所有準備和消毒，然後對其進行評估並檢查您之後的值。

如果字符串之間有任何區別，它將會失敗。

>>>編輯< < <

要清楚這裏，使用toLowerCase()和修剪和其他任何這樣的 - 整點是讓琴絃儘可能地通用。那麼你只能評估它爲str === 'pending'。這將確保字符串大小寫相同，並且還需要較少的工作來確保無論您在哪裏尋找它們，都可以使用大寫字母。

>>>編輯2 < < <

通過刪除引用更新我的回答==和===

來源

2014-11-05 17:22:45

-1

可能是您的解決方案是：

$('#btn').click(function(e){ 
 
    var singleStatus = $('.single-status').text(); 
 
    alert(singleStatus);  
 
    if(singleStatus === 'Pending'){ 
 
     $('.single-status').css('color', '#f2721d'); // This does nothing 
 
     console.log(singleStatus); // This does nothing... 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="single-status">Pending</div><button id="btn"> click</button>

來源

2014-11-05 17:24:39 vrajesh

除了改變'log'到'alert'，並提供自己的HTML *它可能不匹配*，請問如何解決這個問題？ :) – 2014-11-05 17:27:23

我說可能是...好友 – vrajesh 2014-11-05 17:28:34

*可能*確實。這個建議怎麼可能*解決問題？你實際上沒有改變任何與原因有關的東西:) – 2014-11-05 17:30:10

如果聲明不能使用jQuery

回答

相關問題