0

jQuery の初心者には助けが必要です。ファンタジー フットボール サイトのデータベース アプリケーションを作成しています。データベースからプレーヤー情報を取得し、フロント エンドのテーブルに表示して視聴者に表示します。ここで半機能バージョンを見ることができます：

http://digitaldemo.net/kickass/projections-table.php

私が苦労している機能の 1 つは、TFP (合計ファンタジー ポイント) の計算です。上記のリンクの最初のタブには、一連のドロップダウン メニューがあります。ポイント値を選択するものもあれば (例: 2 ポイント)、増分を選択するものもあります (例: 10 パスあたり)。

ページが最初に読み込まれるとき、これらのドロップダウンはデフォルト値で事前に選択されている必要があり、TFP 列にはその最初の計算に基づいた合計が入力されています。

次に、ユーザーはこれらの値を変更し、Get TFP Scores ボタンをクリックすると、TFP 列の合計ポイントが変更されます。

どうすればいいですか？

4

2 に答える 2

1

Cynthia、さまざまな HTML 要素に ID を追加してから、次のような JavaScript を追加する必要があります。

$(function(){
    function calcTFP(e) {
        if(e) e.preventDefault();

        var $tds, Pass_Yds, Pass_TDs, Int, Rush_Yds, Rush_TDs, Overall_Pts, TFP;

        $("tbody#qb tr").each(function() {
            $tds = $(this).find("td");
            Pass_Yds = Number($tds.eq(2).text());
            Pass_TDs = Number($tds.eq(3).text());
            Int = Number($tds.eq(4).text());
            Rush_Yds = Number($tds.eq(5).text());
            Rush_TDs = Number($tds.eq(6).text());

            TFP = Number($s_pass_yds_pts.val()) * Math.floor(Pass_Yds / Number($s_pass_yds_yds.val()));
            TFP += Number($s_pass_tds_pts.val()) * Pass_TDs; 
            //TFP += ........; //for Rushing yds, based on Passing yds.
            //TFP += ........; //for Rushing TDs, based on Passing TDs.
            //TFP += ........; //for Ints Thrown, based on Passing TDs.

            $tds.eq(8).text(TFP);//display calculated points in row's TFP column
        });
    }

    //Passing Yds
    var $s_pass_yds_pts = $("#s_pass_yds_pts").on('change', calcTFP);
    var $s_pass_yds_yds = $("#s_pass_yds_yds").on('change', calcTFP);

    //Passing TDs
    var $s_pass_tds_pts = $("#s_pass_tds_pts").on('change', calcTFP);

    //Rushing Yds
    //add code here based on Passing Yds

    //Rushing TDs
    //add code here based on Passing TDs

    //Int Thrown
    //add code here based on Passing TDs

    $("#b_get_TFP_scores").on('click', calcTFP);//attach calcTFP as click handler to "get_TFP_scores" button

    calcTFP();//initial calculation on page load
})

デモはこちら

コードが部分的にしか処理されていないことがわかりますが、コメントを含めて、残りの記述方法を理解するのに十分なはずです。何が起こっているのかを理解したら、余分なコードを追加することは非常に機械的です。

[Get TFP Scores] ボタンは、計算が (a) ページの読み込み時、および (b) 選択メニューに加えられた変更に応じて自動的に実行されるため、冗長であることがわかります。ただし、ボタンはそのままにしてあります。

編集：

5 つのコンポーネントの計算は、次の 2 つのカテゴリに分類されます。

  • [パス ヤードとラッシュ ヤード]、一般式はpts = s1 * score / s2です。
  • [通過 TD、ラッシュ TD、およびスローされたインターセプト]、一般式はpts = s1 * scoreです。

上記では、2 つのサンプル計算 (合格 Yds と合格 TD) を作成しました。各カテゴリから 1 つずつ。それぞれ適切なサンプルに基づいて、残りの 3 つを処理する必要があります。

まだ行っていない場合は、(デモのように) 追加することも忘れないでください。

  • <select>あなたと<tbody>要素への一意のID 、
  • 値属性を<option>要素に追加します。
于 2012-06-01T04:21:50.030 に答える
0

まず、値を事前に選択するには、サーバーを用意するか、事前に選択するようにハード コードする必要があります。サーバーがそれらを (つまり、DB から) 出力している場合は、バックエンド経由で select を正しい値に設定する必要があります。

それでは、コードに進みましょう。

function calcTfp() {
   // here you are doing your calcuation
   $('tr').each(function(i) {
       var tfp = 1+2+3; // this is for you to define
       $('td:eq(8)', this).val(tfp);
   });
}

クライアント側で値を事前に選択する場合は、次を追加するだけです。

function Preselect() {
   $('#passingYds').val('1 pt');  // these values depend on your implementation
   $('#passingTds').val('4 pts'); 
   // etc
 }

$(document).ready(function() {
  // preSelect();  // If you want to preset values on client side
  calTfp();  // on page load do all the tfp calcs

  // when the button is clicked do the tfp calcs
  $('#btnTfp').click(function(e) {
     e.preventDefault();
     calcTfp();
  });


});
于 2012-06-01T02:51:40.407 に答える