2

このようなものを使用してdivを切り替えます-

<input type="radio" name="myRadio" value="myDiv_1" />MyDiv
<input type="radio" name="myRadio" value="myDiv_2" />MyDiv2
<input type="radio" name="myRadio" value="myDiv_3" />MyDiv3

<div id="myDiv_1"> 1 Some input fields, text </div>
<div id="myDiv_2"> 2 More input fields, text </div>
<div id="myDiv_3"> 3 More input fields, text </div> 

JAVASCRIPT

$('#myDiv_1').hide();
$('#myDiv_2').hide();
$('#myDiv_3').hide();

$('input[name="myRadio"]').change(function() {
        var selected_type = $(this).val();
        switch(selected_type) {
            case "myDiv_1":
                $('#myDiv_1').slideDown();
                //if others are visible just slideup
                $('#myDiv_2').slideUp(); 
                $('#myDiv_3').slideUp();
            break;

            case "myDiv_2": 
                $('#myDiv_2').slideDown();
                //if others are visible just slideup
                $('#myDiv_1').slideUp(); 
                $('#myDiv_3').slideUp();
            break;
            case "myDiv_3": 
                $('#myDiv_3').slideDown();
                //if others are visible just slideup
                $('#myDiv_2').slideUp(); 
                $('#myDiv_1').slideUp();
            break;
        }
    }
);

これはうまくいきます。私の質問は、スイッチのすべてのケースを変更する必要があるかのように、それを改善してより柔軟にする方法です。

また、スイッチ機能を関数に囲み、この関数をクリックや変更などのイベントにバインドする必要があります (トグルが機能することを確認するためだけに)??

ご協力いただきありがとうございます。

4

3 に答える 3

3

これは機能します、私はちょうどそれをテストしました。

<script type="text/javascript">
$(document).ready(function(){

    $('.MyDiv').hide();

    $('input[name="myRadio"]').change(function(){
        var selected = $(this).val();
        $('.MyDiv').slideUp();
        $('#'+selected).slideDown();
    });

});
</script>

ラジオ ボタンは次のようになります。valueはid、表示する要素の です。

<form action="example.com" method="post">
    <input type="radio" name="myRadio" value="myDiv_1" />MyDiv<br />
    <input type="radio" name="myRadio" value="myDiv_2" />MyDiv2<br />
    <input type="radio" name="myRadio" value="myDiv_3" />MyDiv3<br />
    <input type="radio" name="myRadio" value="myDiv_4" />MyDiv4
</form>

そして最後に、divs は次のようになり、すべてのクラスがMyDiv:

<div id="myDiv_1" class="MyDiv">Div number 1!</div>
<div id="myDiv_2" class="MyDiv">Div number 2!</div>
<div id="myDiv_3" class="MyDiv">Div number 3!</div>
<div id="myDiv_4" class="myDiv">Div number 4!</div>
于 2009-07-01T16:10:24.040 に答える
1

以下は、ここに貼り付けたコードに基づいています。使用する前に、以下をお読みください。

$("div").hide();
$("input[name='myRadio']").change(function(){
  $("div:not(#"+$(this).val()+")").slideUp();
  $("div#"+$(this).val()).slideDown();
});

使用する前に...

折りたたみ可能な各パネル (.panel など) にクラスを追加することをお勧めします。次に、セレクターを更新して、ページ上のすべての div ではなく div.panel のみを変更します。

于 2009-07-01T15:57:24.943 に答える
0

あなたのソリューションは IE 8 では機能しません。実際には逆の動作をします。「変更」ではなく「クリック」機能を使用する

  $('.myDiv').hide(); 
    $('input[name="myRadio"]').click(function(){
        var selected = $(this).val();
       $('.myDiv').slideUp();
        $('#'+selected).slideDown();
    });
于 2009-07-26T19:01:37.670 に答える