Question

我有一个包含两组div的页面，如此

<div id="set1">
<div class="1"></div>
<div class="2"></div>
<div class="3"></div>
.....
<div class="n"></div>
</div>

<div id="set2">
<div class="1"></div>
<div class="2"></div>
<div class="3"></div>
.....
<div class="n"></div>
</div>

“set2”在页面加载时隐藏，但是当单击“set1”中的相应div时，每个div都需要出现。例如，当单击“div＃set1.1”时，将显示“div＃set2.1”。我怎么能用jQuery做到这一点？

由于

Answer 1

$('#set1 .1').click(function(event){
    $('#set2 .1').show();
})

这会添加该功能。对其他div重复此操作或使用for循环自动执行此操作。

Answer 2

这应该有效：

var set2 = $('#set2');

$('#set1 > div').click(function(){
    set2.find('.' + this.className).show();
});

出于性能原因，我们首先缓存#set2，然后将点击事件处理程序附加到div的每个#set1个孩子，点击后会导致相应的div } #set2中的同一个类出现。有关简单演示，请参阅http://www.jsfiddle.net/yijiang/xCEVH/1/。

但是，以数字开头的类名在HTML中无效。我冒昧地在演示中纠正了这个错误。

Answer 3

如果父div被隐藏，您将无法显示其子女。使用jQuery，您可以执行this：

之类的操作

隐藏set2的所有孩子

#set2 div{
   display:none;
}

然后点击项目时 - 显示该课程的所有项目。

$("#set1 div").click(function(){
   $('.'+ this.className).show();
});

Answer 4

 $('#set1').bind('click',function() {

    $('#2.'+$(this).attr('id').substring(2)).show();

    });

jQuery函数检查两个div之间的类？

4 个答案: