jQuery改進顯示/隱藏腳本以包含fadeToggle

我有一個腳本，我發現在網上的某個地方顯示或隱藏基於單選按鈕單擊的div。jQuery改進顯示/隱藏腳本以包含fadeToggle

我正試圖通過向轉換中添加fadeToggle（）或slideToggle（）來改善此問題。但是，當我這樣做的功能不像以前那樣工作。當我點擊另一個單選按鈕時，它會同時顯示div和隱藏它們。

// Show/Hide forms based on radio button selection 
$('input[name="screen_type"]').bind('change',function(){ 
var showOrHide = ($(this).val() == 2) ? true : false; 
$('.welcome_screen').toggle(showOrHide); 
    var showOrHide = ($(this).val() == 1) ? true : false; 
$('.training_screen').toggle(showOrHide); 
});

請在這裏看到小提琴 http://jsfiddle.net/clintongreen/JEbFq/

感謝所有幫助傢伙，歡呼

來源

2012-05-01 Clinton Green

」不像以前那樣工作「。它曾經工作過的是什麼樣的，你想讓它工作的是什麼樣的？ –

我已經更新了問題的解釋，歡呼 –

fadeToggle和的slideToggle不帶參數來顯示或隱藏api doc

這裏有一個快速和骯髒的方式來代替它：http://jsfiddle.net/hzSnU/1/

來源

2012-05-01 02:48:15 CambridgeMike

感謝您回答，但任何想法如何使用fadeToggle實現相同的功能？乾杯 –

你錯了：他指的是切換，他正在關注[doc]（http://api.jquery.com/toggle/）：「該方法的第二個版本接受一個布爾參數，如果這個參數是'true'，然後顯示匹配的元素...「 – montrealist

非常感謝，乾杯 –

嘗試th是方法：http://jsfiddle.net/JEbFq/20/

來源

2012-05-01 02:55:05

你可以做這樣的事情：

// Hide lis 
    $(".training_screen").hide(); 
    $(".welcome_screen").hide();  

// Show/Hide forms based on radio button selection 
    $('input[name="screen_type"]').bind('change',function(){ 
     var fnTraining, fnWelcome; 
     if ($(this).val() == 1) { 
      fnTraining = "slideDown"; 
      fnWelcome = "slideUp"; 
     } else { 
      fnTraining = "slideUp"; 
      fnWelcome = "slideDown"; 
     } 
     $('.welcome_screen')[fnWelcome](); 
     $('.training_screen')[fnTraining](); 
});

工作演示：http://jsfiddle.net/jfriend00/4aSbG/

或者，你可以做一個slideToggleOption jQuery的方法，它的顯示/隱藏參數，並使用它像這樣的：

// Hide lis 
    $(".training_screen").hide(); 
    $(".welcome_screen").hide();  

jQuery.fn.slideToggleOption = function(show /* other optional args from slideToggle */) { 
    var args = Array.prototype.slice.call(arguments, 1); 
    if (show) { 
     return(this.slideDown.apply(this, args)); 
    } else { 
     return(this.slideUp.apply(this, args)); 
    } 
}; 

// Show/Hide forms based on radio button selection 
    $('input[name="screen_type"]').bind('change',function(){ 
     var showWelcome = ($(this).val() == 1); 
     $('.welcome_screen').slideToggleOption(showWelcome); 
     $('.training_screen').slideToggleOption(!showWelcome); 
});

工作演示：http://jsfiddle.net/jfriend00/Lqeqe/

「

來源

2012-05-01 02:58:19 jfriend00

jQuery改進顯示/隱藏腳本以包含fadeToggle

回答

相關問題