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>

所有对象都是独立的，我的意思是父母没有关系 - ＆gt;儿童。我想要的是淡入淡出在元素ID中运行具有相同编号的触发器后，DIV被标记为内容。如果我，我知道如何得到它例如有5对DIV，但如果我有无限的div对，我就无法创建脚本。

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

感谢您的回复。

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

使用jQuery淡入和淡出多个DIV

3 个答案: