1

私はjQueryで（少なくとも私の標準では）複雑なものに取り組んでおり、前進する方法に完全に行き詰まっています。多かれ少なかれ頭の中で構造が見えますが、適切に機能する jQuery コードに書き留めるのは困難です。

  • 次または前をクリックすると、次または前の列が強調表示されます。これは正常に機能します。
  • 最後の列 (R6) で次をクリックすると、新しい要素が 1 つ表示され (R7)、R1 が削除されます。R7 以降の列は既に html に含まれていますが、CSS で非表示にされています。R7 を表示させ、R1 を非表示にするにはどうすればよいですか?

目に見えないテーブルは既に html コードに含まれています。R6 をクリックすると、右上のテーブルにレースの説明が表示されます。R7 から R12 まで続きます。

私が考えているロジックは次のようなものです。

  • ユーザーが最後に表示された R に到達し、次にクリックすると、左側の R にクラス 'invisible' が追加され、右側の R にクラス 'visible' が追加されます。T
  • ユーザーが前をクリックすると、上記の逆が発生するはずです。

トリッキーな部分は、最後のRnになったら次のRnを表示させることです..

私のコードを調べてくれてありがとう: http://jsfiddle.net/yunowork/hVHZb/

4

1 に答える 1

0

これがあなたのフィドルのアップデートで、あなたが好きなように機能します。

これは、新しい列を表示し、前の列を非表示にするために追加したコードです。

    if ($nextCol.hasClass("invisible")) {
        $nextCol.removeClass("invisible");        
        $nextCol.addClass("visible");
        var $toRem = $nextCol.prev('td').prev('td').prev('td').prev('td').prev('td').prev('td');
        $toRem.removeClass("visible");
        $toRem.addClass("invisible");
    }

に類似したコードがありますprevious。またcolspan、ヘッダー列12を作成して、余分な列も把握できるようにしました。

コードの唯一の「醜い」部分は、削除する列を見つける方法です。6つの列をバックトラックして、その1つを非表示にすることにしました。理想的には、その機能を抽象化し、より柔軟にしたいと思うでしょう。

編集：修正された前のバグでフィドルを更新しました。if私はこれをステートメントに追加しました： if($prevCol.length != 0 && $prevCol.index() >= 8)。なぜ8その数なのかはわかりませんが（2になるはずだと思います）、4の倍数になるようです。

于 2012-09-07T17:41:01.557 に答える