jquery - 使用jQuery淡入和淡出多个DIV

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-1 DIV 可见，按下 trigger-2 会触发 content-1 的淡出和 content-2 的淡入。

谢谢您的答复。

Answer 1

我建议：

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

JS 小提琴演示。

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