1

ラジオ ボタンのクリックに基づいて div を表示または非表示にするオンラインのどこかで見つけたスクリプトがあります。

トランジションに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/

みんな助けてくれてありがとう、乾杯

4

3 に答える 3

3

およびfadeToggleおよびslideToggleは、 APIドキュメントを表示または非表示にするためのパラメーターを取りません

代わりに、これをすばやく汚い方法で行います：http: //jsfiddle.net/hzSnU/1/

于 2012-05-01T02:48:15.360 に答える
1

この方法を試してください：http：//jsfiddle.net/JEbFq/20/

于 2012-05-01T02:55:05.853 に答える
1

あなたはこのようなことをすることができます：

// 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/

または、show /hideパラメーターを受け取るslideToggleOptionjQueryメソッドを作成し、次のように使用することもできます。

// 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-01T02:58:19.410 に答える