2

私の 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でフェードインすることです。たとえば、DIV のペアが 5 つある場合に取得する方法はわかっていますが、div のペアが無制限の場合はスクリプトを作成できません。

もちろん、コンテンツ 1 DIV が表示されている場合、トリガー 2 を押すと、コンテンツ 1 のフェードアウトとコンテンツ 2 のフェードインがトリガーされます。

ご回答ありがとうございます。

4

3 に答える 3

2

私は提案します：

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

JSフィドルデモ。

于 2012-08-29T16:06:03.977 に答える
1

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()
})
于 2012-08-29T16:06:40.510 に答える
0

擬似コード：

for(i=1; i<n; i++) {
    $('#trigger-'+i).click(function() {
        if($('#content-'+(i-1)).visible) $('#content-'+(i-1)).fadeOut();
        $('#content-'+i).fadeIn();
    });
}
于 2012-08-29T16:06:25.543 に答える