问题
Somebody made a compare script for me, but it is working like it should be, because I a was little unclear, the code doesn't totally do how I like to have it.
Please take a look at this website, this will explain more then thousand words
The function of this website is checking the lotto/bingo numbers, Each draw day (1 and 2) should be compared with all the people who are playing. Some of the numbers are green, but not all the numbers are green which should be green because they match with some numbers in the players list. Again, it was my own fault because I wasn't clear enough. Can somebody please tell me what part should be replaced or edited to have it check all the numbers within the DRAW var instead it checks only the latest added var DRAW?
http://www.coldcharlie.nl/lotto/
This is the function part.
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);
}
This is the HTML part
<!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>
回答1:
i have a different suggestion:
- use jquery
- generate the html such that each players number will have a span with a class that contains that number. for example, 37 will be written as
<span class='pick37'>37</span> - get rid of the crazy array logic, just have one loop to set the colors of all classes that coincide with winning numbers to green.
edit: i looked over your problem. who ever came up with that implementation couldnt have made it any more complicated. I wanted take a stab at your problem, but there is no good reason to try to work with that code when a rewrite would be easier/faster.
Is there any reason for that code being the way it is?
edit2: i was in a good mood so i did rewrite it: also available here: http://dogself.com/test.htm
I hope you learn something from this.
<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>
来源：https://stackoverflow.com/questions/1296198/javascript-compare-array