javascript - javascript比较数组

Question

有人为我制作了一个比较脚本，但它的工作原理应该是这样，因为我有点不清楚，代码并没有完全按照我喜欢的方式拥有它。

请看看这个网站，这将解释超过千字

本网站的功能是检查乐透/宾果号码，每个开奖日（1 和 2）应该与所有正在玩的人进行比较。有些数字是绿色的，但并非所有数字都是绿色的，应该是绿色的，因为它们与球员列表中的一些数字相匹配。同样，这是我自己的错，因为我不够清楚。有人可以告诉我应该替换或编辑哪个部分以让它检查 DRAW var 中的所有数字，而不是只检查最新添加的 var DRAW 吗？

http://www.coldcharlie.nl/lotto/

这是功能部分。

function checkArray(guesses, draw) {
    var results = {}
    for (var i = 0; i< guesses.length; ++i) {
        if (draw.picks[guesses[i]]) {
            results[guesses[i]] = 'win';
        } else {
            results[guesses[i]] = 'loss';
        }
    }
    return results;
}

function appendTo(elt, parent) {
    if (parent) {
        document.getElementById(parent).appendChild(elt);
    } else {
        document.body.appendChild(elt);
    }
}

function printResults(name, winloss, parent) {
    var resultElt = document.createElement('div');
    resultElt.appendChild(document.createElement('span'));
    resultElt.firstChild.appendChild(document.createTextNode(name));
    resultElt.firstChild.className='name';
    var picks = document.createElement('ol');
    picks.className='picks';
    for (var p in winloss) {
        picks.appendChild(document.createElement('li'));
        picks.lastChild.appendChild(document.createTextNode(p));
        picks.lastChild.className = winloss[p];
    }
    resultElt.appendChild(picks);
    appendTo(resultElt, parent);
}

function printResultsFor(name, draw, parent) {
    printResults(name, checkArray(players[name], draw), parent);
}

function printDraw(which, draw, parent) {
    var drawElt = document.createElement('div');
    drawElt.className='draw';
    drawElt.appendChild(document.createElement('h3'));
    drawElt.lastChild.appendChild(document.createTextNode('Draw '+which));
    drawElt.lastChild.className='drawNum';
    drawElt.appendChild(document.createElement('div'));
    drawElt.lastChild.className='date';
    drawElt.lastChild.appendChild(document.createTextNode(draw.when));
    var picks = document.createElement('ol');
    picks.className='picks';
    for (var p in draw.picks) {
        picks.appendChild(document.createElement('li'));
        picks.lastChild.appendChild(document.createTextNode(p));
    }
    drawElt.appendChild(picks);
    appendTo(drawElt, parent);
}

这是 HTML 部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <style type="text/css">
      body {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: white;
        background-color: #333;
      }
      .name {
        color: white;
        font-weight: bold;
        margin-right: 0.5em;
      }
      .picks, .picks * {
        display: inline;
        margin: 0;
        padding: 0;
        list-style-type: none;
      }
      .picks * {
        margin: auto 0.25em;
      }
      .win { color: lime; }
      .loss { color: red; }
      .drawNum, #Draws H3 {
          margin-bottom: 0;
      }
    </style>
    <script type="text/javascript" src="lotto.js"></script>
  </head>
  <body>
    <div id="Results"></div>
    <div id="Draws"></div>
    <script type="text/javascript">
    var players = {John: ["2","3","8","12","23", "37", "41", "45", "48"],
                   Michael: ["2","14","3","12","24", "37", "41", "46", "48"]};

    var draws = [ {when: 'Sat 08-08-2009',
                   picks:{2:1, 5:1, 11:1, 16:1, 23:1, 45:1, 46:1}},
                  {when: 'Sat 15-08-2009',
                   picks:{1:1, 23:1, 11:1, 14:1, 23:1, 42:1, 46:1}}];
    draws.last = draws[draws.length-1];

    for (name in players) {
      printResultsFor(name, draws.last, 'Results');
    }
    for (var i=0; i<draws.length; ++i) {
      printDraw(i+1, draws[i]);
    }
    </script>
  </body>
</html>

score 2 · Accepted Answer

我有一个不同的建议：

使用 jQuery
生成 html，以便每个玩家号码都有一个包含该号码的类的跨度。例如，37 将被写为<span class='pick37'>37</span>
摆脱疯狂的数组逻辑，只需一个循环将所有与中奖号码一致的类别的颜色设置为绿色。

编辑：我查看了您的问题。想出这个实现的人不可能让它变得更复杂。我想解决您的问题，但是当重写会更容易/更快时，没有充分的理由尝试使用该代码。

该代码是这样的有什么理由吗？

edit2：我心情很好，所以我重写了它：也可以在这里找到： http: //dogself.com/test.htm

我希望你能从中学到一些东西。

<html>
<head>
<title>Bingo stuff</title>
<body>
<style type="text/css">
      body {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: white;
        background-color: #333;
      }
      .name {
        color: white;
        font-weight: bold;
        margin-right: 0.5em;
      }
      .picks, .picks * {
        display: inline;
        margin: 0;
        padding: 0;
        list-style-type: none;
      }
      .picks * {
        margin: auto 0.25em;
      }
      .win { color: lime; }
      .loss { color: red; }
      .drawNum, #Draws H3 {
          margin-bottom: 0;
      }
    </style>
<script type="text/javascript" src="http://jquery.com/src/jquery-latest.js"></script>
<div id="players"></div>
<div id="draws"></div>

<script type="text/javascript">
var players = {
                Joop   : ["6","8","16","18","26","28","32","36","38","41"],
                Marijke: ["7","10","14","18","24","29","30","34","39","40"],
                Michel : ["4","5","11","16","21","27","33","36","42","44"],
                Mario  : ["6","9","18","25","32","35","39","40","43","45"],
                Diana  : ["2","6","8","17","22","23","33","36","42","44"],
                Agnes  : ["3","5","10","15","26","29","32","37","41","44"],
                Chris  : ["5","7","8","9","11","12","16","28","30","32"],
                Jeannette: ["1","2","4","7","8","11","13","28","30","32"],
                Wieger: ["1","2","3","7","10","13","14","22","23","27"],
                Anita: ["6","13","15","17","21","26","32","33","43","45"],
                Thea: ["1","3","5","7","10","17","19","20","22","38"],
                Danny: ["3","7","11","15","22","28","32","37","40","43"],
                Cindy: ["2","4","16","18","21","24","33","38","41","44"],
                Hanneke: ["1","3","4","12","18","21","25","30","36","40"],
                Willem: ["3","9","17","21","27","33","35","39","41","42"]

              };

var draws = [ {
               when: 'Sat 08-08-2009',
               picks:[2, 5, 11, 16, 23, 45, 46]
              },
              {
               when: 'Sat 15-08-2009',
               picks:[1, 23, 11, 14, 23, 42, 46]
              }
            ];

var buildPlayers = function(){
    var cont = $("#players");
    for(player in players){
        var html = ["<div>","<span class='name'>"+player+"</span>", "<ol class='picks'>"];
        for(var i = 0; i < players[player].length; i++){
            html.push("<li class='loss pick_"+players[player][i]+"'>"+players[player][i]+"</li>");
        }
        html.push("</ol>","</div>");
        cont.append(html.join(""));
    }
};

var buildDraws = function(){
    var cont = $("#draws");
    for(var i = 0; i < draws.length; i++){
        var html = ["<div class='draw'>","<h3 class='drawNum'>Draw "+(i+1)+"</h3>","<div class='date'>"+draws[i].when+"</div>","<ol class='picks'>"];
        for(var j = 0; j < draws[i].picks.length; j++){
            html.push("<li>"+draws[i].picks[j]+"</li>");
            showWin(draws[i].picks[j]);
        }
        html.push("</ol>","</div>");
        cont.append(html.join(""));
    }
};

var showWin = function(winNum){
    $(".pick_"+winNum).removeClass("loss").addClass("win");
};

$(function(){
    buildPlayers();
    buildDraws();
});

</script>
</body>
</html>

javascript - javascript比较数组

1 回答 1

Related

Reference