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

更新：

这是更新的演示，考虑到 ID 不能在一个页面上多次使用：http: //jsfiddle.net/h6Q38/14/。代码已更新

将所有 ID 更改为类。ID 只能在页面上使用一次，因此请改用类。上面的代码是固定的。

于 2013-02-11T13:37:07.907 回答
0

改变 。在 ＃？$('#'+ value ).show();:-p 否则，老实说，我真的不明白这里发生了什么。作为类名的值有点粗略，但可以肯定......

于 2013-02-11T13:36:54.070 回答
0

一件事是人们已经指出的-您没有更改$('.'+ value )为$('#'+ value ). 但是还有另一个问题。在您的带有 id 的版本中，您只需将class属性更改为id属性，因此您有 2 个相同的元素，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 回答