-1

2 つのラジオ ボタンで JQuery を使用して、2 つの異なる div の表示と非表示を切り替えています。また、ページのロード (またはリロード) 時に存在する現在の値を確認し、現在選択されているものに基づいて div の表示/非表示ステータスを設定できるようにしたいと考えています。

つまり、クリックで実行し、クリックではない場合は、現在設定されていることを実行します。私はうまくいくと思われるこのコードを持っています

var type_option = $('input[name=Type]:checked', '#Form').val();
if (type_option == 'A') {
    $("#A").show();
    $("#B").hide();
} else {
    $("#A").hide();
    $("#B").show();         
}
$(".TypeSelect").click(function() {
    type_option = $('input[name=Type]:checked', '#Form').val();
    if (type_option == 'A') {
        $("#A").show();
        $("#B").hide();
    } else {
        $("#A").hide();
        $("#B").show();         
    }
});

<form>
<input type="radio" name="Type" value="A" class="TypeSelect">
<input type="radio" name="Type" value="B" class="TypeSelect">

<div id="A">A Div</div>
<div id="B">B Div</div>
</form>

しかし、それは正しくないか、少なくとも非常に最適化されているようには見えません。これは使えるかもと思った

var type_option = $('input[name=Type]:checked', '#Form').val();
$(".TypeSelect").click(function() {
    type_option = $('input[name=Type]:checked', '#Form').val();
});
if (type_option == 'A') {
    $("#A").show();
    $("#B").hide();
} else {
    $("#A").hide();
    $("#B").show();         
}

しかし、そうではありませんでした。クリック関数内でこれらの div を設定する必要があると思いますか? これを行うべきより良い方法はありますか、それともチェックを実行して、クリック機能とクリック機能の両方でdivを設定して、必要なことを行う必要がありますか。

4

4 に答える 4

1

ロジックを関数に移動し、ページの読み込み時とクリック イベントの両方で呼び出します。このようなもの。

function toggle()
{
    var type_option = $('input[name=Type]:checked', '#Form').val();
    if (type_option == 'A') {
        $("#A").show();
        $("#B").hide();
    } else {
        $("#A").hide();
        $("#B").show();         
    }
}
toggle();
$(".TypeSelect").click(function() {
    toggle();
});
于 2012-05-07T18:04:34.357 に答える
0

なぜ一方を非表示にしてもう一方を表示するのか、単に表示をnoneに設定して、両方が同時にそこに座っていないようにこれを行うのはなぜですか。

<div id="A" style="display: none;">A Div</div>
<div id="B" style="display: none;">B Div</div>

    $(".TypeSelect").click(function() {
        type_option = this.value;
        if (type_option == 'A') {
            $("#A").show();
$("#B").hide();
        } else {
$("#A").show();
            $("#B").show();         
        }
    });
于 2012-05-07T17:32:06.650 に答える
0 
$(".TypeSelect").click(function() {
    if (this.value == 'A') {
        $("#A").show();
        $("#B").hide();
    } else {
        $("#A").hide();
        $("#B").show();         
    }
});

ページの初期状態にもよりますが、もっと単純な場合もあります。

$(".TypeSelect").click(function() {
    $('#A, #B').toggle(); // Hide visible element, Show hidden element.
});
于 2012-05-07T17:27:56.497 に答える
0 
function togglify(opt) {
  $('div#' + opt).show().siblings('div').hide();  
}
$(".TypeSelect").click(function() {
    type_option = $(this).val();
    togglify(type_option);
}).filter(function() {
    type_option = $(':checked').val();
    togglify(type_option);
});

デモ

于 2012-05-07T17:59:11.383 に答える