2016-07-08 55 views
2

目前,我有選擇什麼應該是基於內容,以顯示和隱藏字段此jQuery代碼:JQuery的淡入隱藏字段和縮小選擇更改

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

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

}); 

這裏是工作提琴: https://jsfiddle.net/b0h6xd0t/

它會淡入現場,但不會因爲某種原因而使其退色。有任何想法嗎?

謝謝!

回答

0

的jQuerytext()是方法。方法,爲了工作,需要使用如下圖所示的括號的:

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); 
}); 

stext()還可以檢查其狀態,因爲根據documentations是:

將文本設置爲每個匹配元素的內容。當提供數字或布爾值時,它將被轉換爲字符串表示形式。

在你的情況,正如我上文所指出,empty string被認爲false,所以它滿足了要求。

注意:在這種情況下,$('#showme')將淡出無論如何,但如果該值true(不爲空),它會褪色回來我不知道,如果你確實想要那個特別的影響,所以採取了。也請看this fiddle

+0

的第一件事工作。我不敢相信我錯過了括號! – DevShadow

+0

在編碼它總是小事:) –

-1

嘗試以下方法:

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

設置淡入作爲淡出功能,這允許文本淡出,改變,然後淡入。if語句並非真的必要。我也更正了text()的使用。

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

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

    }); 

}); 

Fiddle update