Question

jQuery新手需要帮助。我正在为一个梦幻足球网站编写数据库应用程序。它从数据库中提取玩家信息并将其显示在前端的表格中供观众查看。你可以在这里看到它的半功能版本：

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

我很难掌握的一项功能是TFP（总幻想点数）计算。在上面链接的第一个标签中，有一系列下拉菜单。有些是选择点值（例如2点），有些是选择增量（例如，每10个传递yds）。

首次加载页面时，需要使用默认值预先选择这些下拉列表，并根据初始计算使用总计填充TFP列。

然后，用户可以更改这些值，点击获取TFP分数按钮并更改TFP列中的总分。

我该怎么做？

Answer 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
})

演示here

您将看到代码只是部分处理，但应该有足够的，包括注释，以便您找出如何编写其余的代码。一旦你了解了正在发生的事情，添加额外的代码将是非常机械的。

您还会看到[获取TFP分数]按钮是多余的，因为计算是在页面加载时自动执行的（a）和（b）响应对选择菜单所做的更改。但是，我已将按钮留在原位。

编辑：

五个组成部分分为两类：

[传递Yds和Rushing Yds]，其中通用公式为pts = s1 * score / s2。
[通过TD，推动TD和拦截]，通用公式为pts = s1 * score。

上面我已经研究了两个样本计算（用于传递YDS和传递TD），即。每个类别一个。您需要根据适当的样本处理其他三个。

如果您还没有这样做，请记住添加（如演示中所示）：

您的<select>和<tbody>元素的唯一ID
您的<option>元素的值属性。

Answer 2

首先，要预先选择您必须拥有服务器的值，或者必须对其进行硬编码以进行预选。如果您的服务器正在输出它们（即从数据库中），那么您应该通过后端将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();
  });


});

使用下拉列表在jquery中更改计算

2 个答案:

编辑：