Если оператор не работает с использованием 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

проводки мой оригинальный комментарий как ответ ...

Предположим пропуски в тексте Содержание:

Самая распространенная проблема с консольным протоколированием состоит в том, что вы не можете видеть много пробелов. Пробелы традиционно являются символами, которые обеспечивают форматирование, но невидимы. К ним относятся Space, Tab, Carriage return & Line feed.

Ваш ДИВ, скорее всего, имеет возврат каретки, или пробелы, или вкладки, в ней вокруг Pending (обычно в результате приукрашивать в HTML в большинстве редакторов):

например он на самом деле может выглядеть так:

<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 или что-то еще), которое могло бы может привести к тому, что строки не будут приравниваться. Вам нужно будет сделать всю эту подготовку и дезинфекцию до, оценивая ее и проверяя ценность, которую вы после.

если есть какие-либо различия между строками, это не удастся.

>>> Редактировать < < <

Для ясности здесь, использование toLowerCase() и дифферента и что-нибудь еще в этом роде - все дело в том, чтобы получить строки как родовое, насколько это возможно. вам нужно будет просто оценить его как str === 'pending'. это гарантирует, что строковый регистр будет таким же, а также потребует меньше работы, чтобы гарантировать, что есть заглавные буквы, где бы вы ни находились, вы можете их искать.

>>> Редактировать 2 < < <

Обновлено мой ответ на удаление ссылок на == и ===

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>