0

2 つのラジオ ボタンに基づいて一部の結果をフィルター処理できる、大まかな準備が整ったコードがいくつかあります。「すべて表示」として機能する 3 番目のバリアントを追加するのに苦労しています。つまり、4 つの div すべてを一度に表示します。どんな助けでも大歓迎です。

<p class="text1">Variants
 <label>
   <input type="radio" name="type" value="variant-2" id="type_0" checked="checked" />
   Variant 1</label>
 <label>
   <input type="radio" name="type" value="variant-1" id="type_1" />
   Variant 2</label>
</p>


<script>
$(document).ready(function(){
  $("input[name$='type']").click(function(){
  var value = $(this).val();
  if(value=='variant-2') {
    $(".variant-1").show();
     $(".variant-2").hide();
}
else if(value=='variant-1') {
 $(".variant-2").show();
  $(".variant-1").hide();
 }
});
 $(".variant-1").show();
 $(".variant-2").hide();
});

</script>


<div class="variant-1">Variant 1</div>

<div class="variant-2">Variant 2</div>

<div class="variant-1">Variant 1.1</div>

<div class="variant-2">Variant 2.1</div>
4

4 に答える 4

2

これはどう？http://jsfiddle.net/WyxmF/1

<p class="text1">Variants
 <label>
   <input type="radio" name="type" value="variant-2" id="type_0" checked="checked" />
   Variant 1</label>
 <label>
   <input type="radio" name="type" value="variant-1" id="type_1" />
   Variant 2</label>
 <label>
   <input type="radio" name="type" value="variant-all" id="type_all" />
   All</label>
</p>

<div class="variant variant-1">Variant 1</div>

<div class="variant variant-2">Variant 2</div>

<div class="variant variant-1">Variant 1.1</div>

<div class="variant variant-2">Variant 2.1</div>
​


$("input[name$='type']").click(function() {
    var value = $(this).val();
    if (value == 'variant-2') {
        $(".variant-1").show();
        $(".variant-2").hide();
    }
    else if (value == 'variant-1') {
        $(".variant-2").show();
        $(".variant-1").hide();
    }
    else if (value == 'variant-all') {
        $(".variant").show();
    }
});
$(".variant-1").show();
$(".variant-2").hide();​
于 2012-09-26T16:07:29.553 に答える
1

属性「クラス」 jsfiddleに基づいてこのソリューションを試してください

HTML

   <p class="text1">Variants
 <label>
   <input class="gr" type="radio" name="type" value="one" id="type_0" checked="checked" />
   Variant 1</label>
 <label>
   <input class="gr" type="radio" name="type" value="two" id="type_1" />   Variant 2</label>
<label>
   <input class="gr" type="radio" name="type" value="all" id="type_all" />  All</label>

</p>

</br>
</br>
</br>


<div class="variant-1 one all">Variant 1</div>

<div class="variant-2 two all">Variant 2</div>

<div class="variant-1 one all">Variant 1.1</div>

<div class="variant-2 two all">Variant 2.1</div>

JS

$(document).ready(function(){
    $(".gr").click(function(){
        var value = $(this).attr('value');
        $('.all').hide();        
        $('.'+value ).show();
    })
});​
于 2012-09-26T16:12:36.163 に答える
0

このチェックを試してくださいFIDDLE

$(document).ready(function() {
    $("input[name$='type']").click(function() {
        var value = $(this).val();
        if (value == 'variant-2') {
            $(".variant-1").show();
            $(".variant-2").hide();
        }
        else if (value == 'variant-1') {
            $(".variant-2").show();
            $(".variant-1").hide();
        }
        else{
            $(".variant-2").show();
            $(".variant-1").show();
        }
    });
    $(".variant-1").show();
    $(".variant-2").hide();
});​

<p class="text1">Variants
 <label>
   <input type="radio" name="type" value="variant-2" id="type_0" checked="checked" />
   Variant 1</label>
 <label>
   <input type="radio" name="type" value="variant-1" id="type_1" />
   Variant 2</label>
    <label>
   <input type="radio" name="type" value="variant-3" id="type_2" />
   Show All</label>
</p>

<div class="variant-1">Variant 1</div>

<div class="variant-2">Variant 2</div>

<div class="variant-1">Variant 1.1</div>

<div class="variant-2">Variant 2.1</div>​

更新されたコード

繰り返しを減らすためのより良い方法

$(document).ready(function() {
    $("input[name$='type']").click(function() {
        var value = $(this).val();
        if(value == 'variant-3'){
            $('[class*=variant]').show();
        }
        else{
             $('[class*=variant]').hide();
             $('.'+ value ).show();
        }
    }).click();
});​

更新されたフィドル

于 2012-09-26T16:07:54.897 に答える
0

これを試してください..if elseを簡素化します

$(document).ready(function() {
    $("input[name$='type']").click(function() {        
        var value = $(this).val();
        if (value == 'showall') {
            $('div[class^=variant]').show();
        } else {
            var $thisClass = $('div.' + value);
            $thisClass.show();
            $('div[class^=variant]').not($thisClass).hide();
        }
    });
    $("input[value=variant-1]").click();
});​

フィドル

于 2012-09-26T16:11:52.037 に答える