使用jQuery传入和传出多个DIVs

Question

你能帮我解决一下jQuery的问题吗？我想起来都快没力气了。

我有这样的结构：

<div id="trigger-1">Trigger 1</div>
<div id="trigger-2">Trigger 2</div>
<div id="trigger-3">Trigger 3</div>
 ...
<div id="trigger-n">Trigger n</div>

<div id="content-1">Content 1</div>
<div id="content-2">Content 2</div>
<div id="content-3">Content 3</div>
 ...
<div id="content-n">Content n</div>

所有的对象都是独立的，我的意思是没有关系父->子对象。我想得到的是在元素ID中使用相同的数字运行触发器后，在标记为内容的DIV中进行渲染。例如，如果我有5对DIV，我知道如何获得它，但如果我有无限对的DIV，我就不能创建脚本。

当然，如果content-1DIV可见，按trigger-2将触发content-1的fadeOut和content-2的fadeIn。

感谢您的回复。

Answer 1

我建议：

$('div[id^="trigger"]').click(
    function(){
        var num = this.id.match(/\d+/);
        $('div[id^="content-"]').fadeOut();
        $('#content-' + num).fadeIn();
    });​

JS Fiddle demo。

Answer 2

您可以使用attribute starts with选择器：

$('div[id^="trigger"]').click(function(){
   var id = this.id.slice(-1)
   $('div[id^="content"]').fadeOut();
   $('#content-'+id).fadeIn()
})

但最好使用类：

<div class='trigger' id="trigger-1">Trigger 1</div>
<div class='trigger' id="trigger-2">Trigger 2</div>
<div class='trigger' id="trigger-3">Trigger 3</div>
 ...
<div class='trigger' id="trigger-n">Trigger n</div>

<div class='content' id="content-1">Content 1</div>
<div class='content' id="content-2">Content 2</div>
<div class='content' id="content-3">Content 3</div>
 ...
<div class='content' id="content-n">Content n</div>

$('.trigger').click(function(){
   var id = this.id.slice(-1)
   $('.content').fadeOut();
   $('#content-'+id).fadeIn()
})

Answer 3

伪码：

for(i=1; i<n; i++) {
    $('#trigger-'+i).click(function() {
        if($('#content-'+(i-1)).visible) $('#content-'+(i-1)).fadeOut();
        $('#content-'+i).fadeIn();
    });
}