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

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

假设文本内容中有空格：

控制台日志记录最常见的问题是你看不到很多空白。传统上，空格是提供格式但不可见的字符。其中包括Space，Tab，Carriage return＆amp; Line feed。

您的div很可能在Pending周围有一个回车符，或空格或制表符（通常是在大多数编辑器中对HTML进行美化）：

e.g。它实际上可能看起来像：

<div>Pending
</div>

或

<div>Pending </div>

甚至

<div>
   Pending
</div>

和text()返回所有文字内容，包括空白。

<强>解决方案：

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

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

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

注意：当text()返回字符串（或未定义）时，将比较更改为==将不会对问题产生任何影响。

Answer 2

这可能是一些问题。

您可能需要做一些事情，比如将值转换为小写（singleStatus.toLowerCase()），关闭所有空格（使用正则表达式替换或类似的东西）以及确保其他任何内容（如html或其他任何内容））这可能导致字符串不等同。在评估它并检查你所追求的价值之前，你需要做所有这些准备和消毒。

如果字符串之间存在任何差异，则会失败。

<强>＆GT;＆GT;＆gt;编辑＆LT;＆LT;＆LT;

要明确这里使用toLowerCase()和trim以及其他任何类似的东西 - 重点是让字符串尽可能通用。然后你必须将其评估为str === 'pending'。这将确保字符串大小写相同，并且还需要较少的工作来确保在您可能正在寻找它们的地方有大写字母。

<强>＆GT;＆GT;＆GT;编辑2＆lt;＆lt;＆lt;

通过删除对==和===
的引用来更新我的回答

Answer 3

可能是您的解决方案：

$('#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>

如果语句不能使用jQuery

3 个答案: