Jquery确定点扩散

时间:2014-01-20 20:38:45

标签: javascript jquery html5

我正在尝试计算点差以确定胜利者。 我有一个函数,根据输入的分数计算总分数。 我写了一个函数来确定点差,然后给胜利者申请一个标签。但是出于某种原因,如果第二个玩家在第一个玩家获得积分后最终赢得胜利者,则仍然会向第一个玩家申请。

我做错了什么,是否有更好的方法来解决这个问题?

计算函数

function calculate() {
            var arr = [];
            var orr = [];
            var input = "";
            var row1 = 0;
            var row2 = 0;
            $("tbody tr").each(function() {
                row_total = 0;
                $(".score", this).each(function() {
                    row_total += Number($(this).val());
                });
                $(".total", this).val(row_total);
                $(".total", this).each(function() {
                    arr[row1] = $(this).val();
                    row1 += 1;
                });
                $(".status", this).each(function() {
                    orr[row2] = $(this);
                    row2 += 1;
                });
            });

            var spread = Math.abs(arr[0] - arr[1]);

            if (spread >= 5) {
                if (arr[0] > arr[1]) {
                    input = orr[0];
                } else if (arr[1] > arr[0]) {
                    input = orr[1];
                }
                alert("arr0:" + arr[0] + '\n' +
                        "arr1:" + arr[1] + '\n' +
                        "orr0:" + orr[0].text() + '\n' +
                        "orr1:" + orr[1].text() + '\n' +
                        "input:" + $(input).text() + '\n');
                var w3 = $(input).html("Winner");
                var w4 = $(input).css('background-color', 'lightgreen');
                var w5 = $(input).css('color', 'black');
            }
        }

HTML表格

<table id="main">
        <tr>
            <td class="r_color">

            </td>
            <td class="r_name">
                Competitor
            </td>
            <td class="r_score">
                Score 
            </td>
            <td class="r_score">
                Warnings
            </td>
            <td class="r_total">
                Total
            </td>
            <td>
                <input type="button" id="btn_Reset" value="Reset Points"/>
                <input type="button" id="btn_Clear" value="Clear All"/>
            </td>
        </tr>
        <tr>
            <td class="r_color">
                Red:
            </td>
            <td class="r_name">
                <input type="text" class="name"/>
            </td>
            <td class="r_score">
                <input class="score" type="number" step="1" min="-100" max="100" value="0" />
            </td>
            <td class="r_score">
                <input class="warning" type="number" step="1" min="0" max="3" value="0" />
            </td>
            <td class="r_total">
                <input class="total" type="text" value="0"/>
            </td>
            <td class="status">
                red
            </td>
        </tr>
        <tr>
            <td class="r_color">
                White:
            </td>
            <td class="r_name">
                <input type="text" class="name"/>
            </td>
            <td class="r_score">
                <input class="score" type="number" step="1" min="-100" max="100" value="0" />
            </td>
            <td class="r_score">
                <input class="warning" type="number" step="1" min="0" max="3" value="0" />
            </td>
            <td class="r_total">
                <input class="total" type="text" value="0"/>
            </td>
            <td class="status">
                white
            </td>
        </tr>
    </table>

1 个答案:

答案 0 :(得分:1)

我试图“猜测”HTML部分并在第5,7和14行用.html()替换了.val(),因为我使用了我的分数,总数和状态(我不知道你是什么'重新使用)。

HTML部分:

<table border="1">
    <tbody>
        <tr>
            <td class="score">10</td>
            <td class="score">10</td>
            <td class="score">5</td>
            <td class="total"></td>
            <td class="status"></td>
        </tr>

        <tr>
            <td class="score">30</td>
            <td class="score">4</td>
            <td class="score">5</td>
            <td class="total"></td>
            <td class="status"></td>
        </tr>
   </tbody>
</table>

Javascript部分:

function calculate() {
    $("tbody tr").each(function() {
        row_total = 0;
        $(".score", this).each(function() {
            row_total += Number($(this).html());
        });
        $(".total", this).html(row_total);
    });

    var arr = [];
    var orr = [];
    var row = 0;
    $("tbody tr").each(function() {
        $(".total", this).each(function() {
            arr[row] = $(this).html();
            orr[row] = $(this);
            row += 1;
        });
    });

    var spread = Math.abs(arr[0] - arr[1]);

    if (spread >= 5) {
        alert(arr[0] + "|" + arr[1]);
        if (arr[0] > arr[1]) {
            var w3 = $(orr[0]).closest('tr').find('.status').html("Winner");
            var w4 = $(orr[0]).closest('tr').find('.status').css('background-color', 'lightgreen');
            var w5 = $(orr[0]).closest('tr').find('.status').css('color', 'black');
        } else if (arr[1] > arr[0]) {
            var w3 = $(orr[1]).closest('tr').find('.status').html("Winner");
            var w4 = $(orr[1]).closest('tr').find('.status').css('background-color', 'lightgreen');
            var w5 = $(orr[1]).closest('tr').find('.status').css('color', 'black');
        }
    }
}

更改其他内容,您的代码无效,请点击此处:http://jsfiddle.net/JgPvM/1/