JQuery Fade Скрытое поле In And Out On Выберите Изменить

Question

я в настоящее время этот JQuery код, который должен показать и скрыть поле на основе содержимого на то, что выбрано:

$('#State').on('change', function() { 
var s = $('#State option:selected').text; 

if(s !== "") 
{ 
    $('#showme').fadeIn(); 
} 
if(s === "") 
{ 
    $('#showme').fadeOut(); 
} 

}); 

Вот рабочая скрипку: https://jsfiddle.net/b0h6xd0t/

Это поле исчезнет, ​​но по какой-то причине оно не исчезнет. Есть идеи?

Спасибо!

Answer 1

В JQuery, text() является метод. Методы для того, чтобы работать, требуют использования скобок, как показано ниже:

var s = $('#State option:selected').text(); // I added:() 

Примечание: В JavaScript empty string считается false. Так что для опрятности, вы можете превратить ваш код в следующее:

$('#State').on('change', function() { 
    var s = $('#State option:selected').text(); 

    if(s) { // If it's true 
     $('#showme').fadeIn(); 
    } 
    else { // If it's false 
     $('#showme').fadeOut(); 
    } 
}); 

Отъезд обновленную версию вашей скрипкой here.

В качестве альтернативного, а другой ответ также правильно указал, вы можете использовать:

$('#showme').fadeOut(500, function() { 
    $(this).text(s).fadeIn(500); 
}); 

Ввод s внутри text() может также проверить его состояние, потому что в соответствии с documentations является:

Текст для установки в качестве содержимого каждого согласованного элемента. Когда Number или Boolean будет предоставлен, он будет преобразован в представление String.

В вашем случае, как я указывал выше, empty string считается false, поэтому он выполняет это требование.

Примечание: В этом случае, $('#showme') будет исчезать в любом случае, но если значение true (не пусто) будет исчезать обратно, я не уверен, что если вы на самом деле хотите, чтобы конкретный эффект, так что взять. посмотрите на this fiddle.

Answer 2

Попробуйте следующее:

var s = $('#State option:selected').text(); 

Answer 3

Установите затухание как функцию исчезновения, это позволяет тексту исчезать, меняться, а затем исчезать. Операции if на самом деле не нужны. Я также исправил использование text().

$('#State').on('change', function() { 
    var s = $('#State option:selected').text(); 

    $('#showme').fadeOut(300, function() { 
    $(this).text(s).fadeIn(300); 

    }); 

}); 

Fiddle update