0

私がクライアント向けのサイトを作成するとき、左側のボタンが右側の div を適切にフェードインおよびフェードアウトさせる、両面レイアウトのリクエストを常に受け​​取ります。長い間、私はそれぞれのケースを書いてきました。（これは少しばかげていて時間がかかります）。それを体系化したいのですが、javascript/jquery で .click() や配列がどう動くのか分からなくて苦労しています。

$(document).ready(function(){
    var left = new Array($('#a'),$('#b'), $('#c'),$('#d'), $('#e'));
    var right = new Array($('#1'),$('#2'),$('#3'),$('#4'),$('#5'));
   // left[0].click(function(){right[0].fadeIn('fast');})
    var numbers = new Array(1,2,3,4,5);

    function fadey(x){
        left[x].click(function(){
          right[x].fadeIn('fast');
         })

    }
    for (var i = 0; i < left.length; i++) {
      fadey(i);
    };
})

このコードは、左側のボタンが対応する右側の div を表示するように取得します。問題は、すべての div を非表示にすることなく、他の div を非表示にできないように見えることです。

理想的には、左側のjqueryオブジェクト配列がクリックされたときをチェックし、そのインデックス値を取得し、対応する右側のjqueryオブジェクト配列を表示し、もう一方を非表示にする1行のコードを作成できれば、それはドープですもの。

このようにして、要素を各配列にプラグインするだけで、これらのケースを 1 つずつ記述することを心配する必要がなくなります。

手伝ってくれてどうもありがとう！

4

1 に答える 1

2

ID の代わりにクラスを使用して、一般的なイベント ハンドラーを作成できます。

$('.left button').click(function() {
    var index = $(this).index();

    $('.right section').eq(index).fadeIn('fast');
});

あなたのHTMLは次のようになっていると思います：

<aside class="left">
    <button>One</button>
    <button>Two</button>
    <button>Three</button>
</aside>

<aside class="right">
    <section>One</section>
    <section>Two</section>
    <section>Three</section>
</aside>
于 2013-02-28T20:23:26.030 に答える