2014-12-17 2 views
1

Я пытаюсь добавить сообщение «Продукт отсутствует на складе» в макет продукта с jQuery, который появляется, если запас продукта равен нулю. Код, который у меня есть сейчас, покажет сообщение, которое я хочу, если я использую двойное сравнение ==, но не, если я использую точное сравнительное сравнение ===. Что я делаю неправильно в своем коде, чтобы вызвать это событие? С помощью сравнения == мой код также добавит сообщение в любой товар с "N/A" в пункт <li id="stock"></li>, а также не предназначен.Добавить сообщение, если содержимое элемента списка равно нулю

HTML:

<ul class="nobullet" id="product-info"> 
    <li id="stock" style="display:none;">0</li> 
    <li id="stockMessage"></li> 
</ul> 

JQuery:

var stockAmount = $("#stock").text(); 

if (stockAmount == 0){ 
    $("#stockMessage").html("<span style='color:red;'>Product is out of stock.</span>"); 
} 

живая страница: http://www.redlakewalleye.com/main-menu/walleye-1/walleye-cheeks-fresh-frozen

+1

** Вы прокомментировали элемент '# stock' **, как вы ожидаете, что jQuery получит этот элемент и его текст? –

+0

@ RokoC.Buljan Я обновлен для отображения: нет; вместо. Благодарю. – Phorden

+1

Ну, теперь это большая разница. Вы должны уведомить об этом важном изменении в своем Вопросе. –

ответ

3

Функция JQuery .text() возвращает строку. Вы сравниваете строку с номером с помощью этого кода:

stockAmount == 0 

Так что преобразование типа должно быть выполнено. Оператор == делает это автоматически, но оператор === не работает, поскольку он не выполняет преобразование типов.

От MDN documentation относительно ==:

Оператор равенства преобразует операнды, если они не имеют одного и того же типа, то применяется строгое сравнение. Если любой операнд является числом или логическим, операнды, если это возможно, преобразуются в числа; else, если любой операнд является строкой, операнд строки преобразуется в число, если это возможно. Если оба операнда являются объектами, тогда JavaScript сравнивает внутренние ссылки, равные, когда операнды относятся к одному и тому же объекту в памяти.

И ===:

единичный оператор возвращает истину, если операнды строго равны (см выше) без преобразования типа.

Если вы хотите использовать оператор ===, вы могли бы сначала разобрать текст элемента в целое число, используя код, подобный следующему:

var stockAmount = parseInt($("#stock").text(), 10); 

if (stockAmount === 0){ 
    //... 
} 
+0

Благодарим вас за подробное объяснение.Теперь я понимаю, что проблема с кодированием намного лучше. – Phorden

+0

@Phorden Glad Я мог бы помочь. Если это ответит на ваш вопрос, вы должны отметить его как принятое (щелкните галочку под стрелками голосования). –

1

Прежде всего не закомментировать <!-- --> элемент текст которого должен быть получен JS (jQuery) Скрыть его с помощью любого другого подхода.

var stockAmount = +$("#stock").text(); // "0" // Yey it works now!! 
       // ^---- unary + to convert to Number 

if (!stockAmount){ // or use: stockAmount === 0 
    $("#stockMessage").html("<span style='color:red;'>Product is out of stock.</span>"); 
} 

Я не покроют тему о What's the difference between == and === потому что уже ответили как на Goog анс так.

Смежные вопросы