javascript - 如果语句无法使用 jQuery 工作

Question

我有一个从 div 获取文本的变量。我使用 if 语句比较该文本，然后根据它的真假对其应用 CSS。由于某种原因，我无法让它工作。该变量获取了正确的文本，因为我通过 console.log 进行了验证，但 if 语句不起作用。这是我的代码:

$(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...
    }
});

Answer 1

发布我的原始评论作为答案...

假设文本内容中有空格:

控制台日志记录最常见的问题是看不到大量空格。传统上，空白是提供格式但不可见的字符。其中包括空格、Tab、回车和换行。

您的 div 很可能在 Pending 周围有一个回车符、空格或制表符(通常是在大多数编辑器中美化 HTML 的结果):

例如它实际上可能看起来像:

<div>Pending
</div>

或

<div>Pending </div>

甚至

<div>
   Pending
</div>

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

解决方案:

在比较之前使用 $.trim 删除不需要的空格:

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

您不想使用string.trim()，因为并非所有浏览器都支持它。这就是 jQuery 提供静态 $.trim() 方法的原因。

注意: 由于 text() 返回一个字符串(或未定义)，因此将比较更改为 == 对问题没有影响.