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

http://jsfiddle.net/sushanth009/h6Q38/1/

クラスを使用して div 要素を表示/非表示にします。クラスの代わりにIDを使用して同じことを達成するにはどうすればよいですか? やってみたのですが、全部隠したり全部見せたりしてしまいます。

これは私のコード http://jsfiddle.net/h6Q38/8/です

4

4 に答える 4

2

私はあなたがこれを望んでいると思います：

<div id="variant-1">Variant 1</div>
<div id="variant-2">Variant 2</div>
<div id="variant-1.1">Variant 1.1</div>     <!-- don't reuse id! -->
<div id="variant-2.1">Variant 2.1</div>     <!-- don't reuse id! -->

$("input[name$='type']").click(function() {
    if (this.value=='variant-3'){
        $('[id^=variant]').show();
    } else{
        $('[id^=variant]').hide();
        $('[id^='+this.value+']').show();
    }        
});

デモンストレーション

于 2013-02-11T13:37:26.627 に答える
1

HTML

<p class="text1">Variants
 <label>
   <input type="radio" name="type" value="variant-1" id="type_0" checked="checked" />
   Variant 1</label>
 <label>
   <input type="radio" name="type" value="variant-2" 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>

JS

$(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();
});

UPD：

IDをページで複数回使用できないことを考慮して、更新されたデモを次に示します：http: //jsfiddle.net/h6Q38/14/。コードが更新されました

すべてのIDをクラスに変更します。IDはページ上で1回だけ使用する必要があるため、代わりにクラスを使用してください。上記のコードはそれで動作するように修正されています。

于 2013-02-11T13:37:07.907 に答える
0

変化 。の ＃？$('#'+ value ).show();:-pそうでなければ、正直に言うと、ここで何が起こっているのか本当にわかりません。クラス名としての値はちょっと大雑把ですが確かに...

于 2013-02-11T13:36:54.070 に答える
0

1 つのことは、みんながすでに指摘していること$('.'+ value )です$('#'+ value )。しかし、別の問題があります。ID を使用したバージョンでは、class属性をid属性に変更しただけなので、同じ要素が 2 つあり、これidはエラーです。id属性は一意である必要があります。

ID を使用する場合は、ID を一意に変更する必要があります。いくつかの要素を何らかの方法で接続する必要がある場合は、次のidように の最後に何かを追加できます。

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

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

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

<div id="variant-2-1">Variant 2.1</div>

次に、特定の要素を示す行を更新します。

$('[id*='+ value + ']' ).show();

更新されたコードを確認してください - http://jsfiddle.net/h6Q38/8/

于 2013-02-11T13:46:49.847 に答える