javascript - ラジオ ボタンが選択されている場合、分割を表示 - 8 つのラジオ ボタン / 8 つの分割 - これを簡略化できますか?

Question

基本的に、8つのラジオボタンが必要です。1 つのラジオ ボタンが選択されている場合、div が下に表示されます。別のボタンが選択されている場合、別の div が表示されます。一度に 1 つの div のみが表示され、(最初に) ボタンが選択されていない場合、div は表示されません。

これはかなり標準的な私の HTML です。必要に応じてこれを改善しようとしているわけではありません。

<form id='group'>
    <label><input type="radio" name="group1" class="sim-micro-btn"/></label>
    <label><input type="radio" name="group1" class="sim-mini-btn"/></label> 
    <label><input type="radio" name="group1" class="sim-maxi-btn"/></label>
    <label><input type="radio" name="group1" class="sim-mega-btn"/></label>
    <label><input type="radio" name="group1" class="phone-smart-micro-btn"/></label>
    <label><input type="radio" name="group1" class="phone-smart-mini-btn"/></label>
    <label><input type="radio" name="group1" class="phone-smart-btn"/></label>
    <label><input type="radio" name="group1" class="phone-smart-maxi-btn"/></label>
</form>

<div class="billpay-internet-add-ons">
    <div class="sim-micro-desktop">sim-micro</div>
    <div class="sim-mini-desktop">sim-mini</div>
    <div class="sim-maxi-desktop">sim-maxi</div>
    <div class="sim-mega-desktop">sim-mega</div>
    <div class="phone-smart-micro-desktop">phone-smart-micro</div>
    <div class="phone-smart-mini-desktop">phone-smart-mini</div>
    <div class="phone-smart-desktop">phone-smart</div>
    <div class="phone-smart-maxi-desktop">phone-smart-maxi</div>
</div>

ただし、これは私のスクリプトであり、かなり忙しいようです。先に進む前に、これをもう少し簡単に行う方法はありますか?

$(document).ready(function(){
    $('.sim-micro-desktop').hide();
    $('.sim-mini-desktop').hide();
    $('.sim-maxi-desktop').hide();
    $('.sim-mega-desktop').hide();
    $('.phone-smart-micro-desktop').hide();
    $('.phone-smart-mini-desktop').hide();
    $('.phone-smart-desktop').hide();
    $('.phone-smart-maxi-desktop').hide();


    $('form#group').click(function(){
        if($('.sim-micro-btn').is(":checked")){
            $('.sim-micro-desktop').show();
        } else {
            $('.sim-micro-desktop').hide();
        }     

        if($('.sim-mini-btn').is(":checked")){
            $('.sim-mini-desktop').show();
        } else {
            $('.sim-mini-desktop').hide();
        }     

        if($('.sim-maxi-btn').is(":checked")){
            $('.sim-maxi-desktop').show();
        } else {
            $('.sim-maxi-desktop').hide();
        }  

        if($('.sim-mega-btn').is(":checked")){
            $('.sim-mega-desktop').show();
        } else {
            $('.sim-mega-desktop').hide();
        }  

        if($('.phone-smart-micro-btn').is(":checked")){
            $('.phone-smart-micro-desktop').show();
        } else {
            $('.phone-smart-micro-desktop').hide();
        }  

        if($('.phone-smart-mini-btn').is(":checked")){
            $('.phone-smart-mini-desktop').show();
        } else {
            $('.phone-smart-mini-desktop').hide();
        }  

        if($('.phone-smart-btn').is(":checked")){
            $('.phone-smart-desktop').show();
        } else {
            $('.phone-smart-desktop').hide();
        }  

        if($('.phone-smart-maxi-btn').is(":checked")){
            $('.phone-smart-maxi-desktop').show();
        } else {
            $('.phone-smart-maxi-desktop').hide();
        }  

          });


});

Answer 1

radioまず、コンテンツを表示するボタンとdiv要素の両方に共有クラスを配置します。私の例では、それぞれ と を使用triggerしcontentました。次に、ラジオに属性を追加してdata、クリック時に表示する div を識別します。

短縮例:

<form id='group'>
    <label>
        <input type="radio" name="group1" class="sim-micro-btn trigger" data-rel="sim-micro-desktop" />
    </label>
</form>
<div class="billpay-internet-add-ons">
    <div class="sim-micro-desktop content">sim-micro</div>
</div>

次に、次のような 1 つのクリック ハンドラーのみが必要です。

$(document).ready(function(){
    $('.trigger').click(function() {
        $('.content').hide();
        $('.' + $(this).data('rel')).show();
    });
});

また、jQuery を使用せずに CSS を使用してdiv要素を非表示にすることもできます。スタイリングは常に CSS で行う必要があります。

.content {
    display: none;
}

フィドルの例

Answer 2

divCSS を使用して要素を非表示にできます。

.billpay-internet-add-ons div {
  display: none;
}

次に、classNameのを使用して、表示する要素targetを決定しdiv、すべてのsibling要素を非表示にすることができます。

$('form#group').click(function(e) {
    var className = e.target.className.replace('btn', 'desktop');    
    $('.' + className).show().siblings().hide();
});

ここにフィドルがあります

Answer 3

私はそれを単純化しました。基本的に、クリックしたラジオのインデックスを調べて、同じインデックスの div を表示します。したがって、div の位置はラジオと一致する必要があります。

HTML は以前と同じです。

あなたのCSS:

.billpay-internet-add-ons > div {
    display:none;
}

すべての Javascript:

$(document).ready(function(){
    $('form#group').click(function(e)
    {
        $('.billpay-internet-add-ons > div').hide();
        $('form#group input[type="radio"]').each(function(index)
        {
            if($(this).is(':checked'))
            {
                $('.billpay-internet-add-ons > div:eq(' + index + ')').show();
            }
        });
    });
});

jsFiddle デモ: http://jsfiddle.net/cfSXY/

Answer 4

表示する必要がある対応する div を指す html5 データ属性)(つまり data-mappingclass ) を使用します。すべてのラジオ ボタンに同じクラスを追加します (つまり、radioClass)。

HTML

 <label><input type="radio" name="group1" class="radioClass sim-micro-btn" data-mappingclass="sim-micro-desktop"/></label>
 <label><input type="radio" name="group1" class="radioClass sim-mini-btn" data-mappingclass="sim-mini-desktop"/></label>
 ... //same for others

JS

$('.radioClass').click(function() {
  $('.billpay-internet-add-ons div').hide();
  if(this.checked){
     $('.' + $(this).data('mappingclass').show();
  }
});

Answer 5

まず、CSS を使用してデフォルトですべてを非表示にすることができます (おそらく 1 つのフォームを除く)。

$('.sim-micro-desktop').hide();
$('.sim-mini-desktop').hide();
$('.sim-maxi-desktop').hide();
$('.sim-mega-desktop').hide();
$('.phone-smart-micro-desktop').hide();
$('.phone-smart-mini-desktop').hide();
$('.phone-smart-desktop').hide();
$('.phone-smart-maxi-desktop').hide();

これは、javascript を使用しないユーザーにとってはマイナスの影響を及ぼします。心配している場合は、他のフォームを表示することはできません。

次に、チェックできるラジオは 1 つだけなので、使用しているラジオを見つけます。

$('input[name=group1]:checked);

しかし、なぜそれを行うのでしょうか。ラジオには次のようなクリック ハンドラーがあります。

$('#group input[type="radio"').click(function(){
    //code to show/hide form
});

これで、ラジオ ボタンをさまざまなフォームにリンクする方法を選択できるようになりました。データ属性を使用する方法の 1 つとして、次のようにラジオを定義します。

<label><input type="radio" name="group1" class="phone-smart-maxi-btn" data-form="phone-smart-maxi-desktop"/></label>

次のようにアクセスできます。

$('input[name=group1]:checked).data("form");

:visibleあとは、既に表示されていた div を非表示にするだけですが、これは data 属性を同様に使用するか、セレクターを使用することで実現できます。

Answer 6

ここでは、セレクターを使用してコードの行数を減らすことができます。

$('.sim-micro-desktop').hide();
$('.sim-mini-desktop').hide();
$('.sim-maxi-desktop').hide();
$('.sim-mega-desktop').hide();
$('.phone-smart-micro-desktop').hide();
$('.phone-smart-mini-desktop').hide();
$('.phone-smart-desktop').hide();
$('.phone-smart-maxi-desktop').hide();

次のように短縮できます。

$('.billpay-internet-add-ons div').hide();

これは、親要素を使用して、非表示にする要素をグループ化するのではなく、要素ごとにリクエストを繰り返します。

同様に、命名規則を使用して、項目を要素にマップして表示および非表示にすることができます。完全な動作例は次のとおりです。

$(document).ready(function(){
    $('.billpay-internet-add-ons div').hide();

    $('form#group').click(function(){
        $('#group input').each(function() {
            var item = $(this);
            var isChecked = item.is(':checked');
            var name = item.attr('class').replace("-btn", "-desktop");

            if (isChecked) {
                $('.' + name).show();
            } else {
                $('.' + name).hide();
            }
        });
    });
});

この例は、変更を加えていない純粋な HTML に基づいています。ここで動作することを確認してください。

名前を変換する必要がなければ、これをさらに単純化できます。これを行うには、クラス名を変更する代わりに data-attribute を使用できます。

Answer 7

var $billpay= $('.billpay-internet-add-ons');
$billpay.find("div").hide();
$("#group input:radio").click(function(){
  $billpay.find("div").hide();
  $billpay.find("div:eq("+$(this).parent().index()+")").show();    
}); 

http://jsfiddle.net/KaF77/2/