javascript - JQuery 在选择更改时淡入和淡出隐藏字段

Question

我目前有这个 jquery 代码，它应该根据所选内容显示和隐藏一个字段:

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

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

});

这是一个有效的 fiddle :https://jsfiddle.net/b0h6xd0t/

它会淡入场，但不会因为某种原因淡出。有什么想法吗？

谢谢!

Answer 1

在jQuery中，text()是方法。方法，为了工作，需要使用括号，如下所示:

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

注意:在 JavaScript 中，空字符串 被认为是 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();
    }
});

检查您的 fiddle 的更新版本 here .

作为替代方案，正如另一个答案也正确指出的那样，您可以使用:

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

将s放入text()也可以检查其状态，因为根据documentation s 是:

The text to set as the content of each matched element. When Number or Boolean is supplied, it will be converted to a String representation.

在您的情况下，正如我上面指出的那样，空字符串 被认为是false，因此它满足要求。

注意:在这种情况下，$('#showme') 无论如何都会淡出，但是如果值为 true(不是空)它会淡出。我不确定你是否真的想要那种特殊效果，所以看看 this fiddle