Question

$(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/

Answer 1

我想你想要这个：

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

Demonstration

Answer 2

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必须仅在页面上使用一次，因此请改用类。以上代码已修复，可以使用该代码。

Answer 3

改变。在＃？ $('#'+ value ).show(); :- p否则我真的不明白这里发生了什么。作为classname的值有点粗略但确定......

Answer 4

有一件事是人们已经指出的 - 你没有将$('.'+ 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/

使用id动态显示/隐藏div元素

4 个答案: