世界杯小组赛阶段抽签算法

时间：2017-11-26 12:40:46

标签： javascript jquery html-table

我正在制作一个世界杯小组赛阶段抽奖网站。 当我检查某些类是否已经具有相同的类

时，我对算法有一些问题

查找并将img放入空td工作但浏览器不检查某些类是否已经有一个具有相同类的子img。

enter image description here

我的代码出了什么问题？

结果：

enter image description here

＆＃13;
＆＃13; 
var teamList = $('div.seeds img');
var counter=0;

var continentClass, seedClass, currentTeam;
$('button').on('click',function(){
	if(counter<=30)	
		getTeam();
	else
		alert('No more team is allowed');
});

function getTeam(){
	// count image tags
	currentTeam=teamList.eq(counter);
	//get the second and first class of img tag
	continentClass = currentTeam.attr('class').split(' ')[0];
	seedClass = currentTeam.attr('class').split(' ')[1];
	setGroups();
	currentTeam.fadeOut();
	counter = counter +1;
}

function setGroups(){
	//find td tag which has a parent with same class as the img tag 
	var activeTD = $('tr.'+seedClass + ' td');
	while(true){
		//find a random TD and repeat while loop if the tag has any child 
		var randomTD = activeTD.eq(Math.floor(Math.random()*activeTD.length));
		if(randomTD.children().length==0){
			//break while-loop if function returns true
			//td as parameter
			if(checkDuplication(randomTD))
				break;
		}
	}
}
function checkDuplication(tableTD){
	
	//get the class of randomly chosen td tag
	var getGroupClass = tableTD.attr('class');
	//all td with same group class
	var sameGroups = $('td.'+getGroupClass);
	//console.log(sameGroups.children().attr('class'));
	//console.log('img :' +$('td.'+getGroupClass).children('img').attr('src'));
	if(sameGroups.children(continentClass).not('.europe').length>0){
		console.log('exists already');
		return false;
	}else if(continentClass == 'europe' && sameGroups.children(continentClass).length>1){
		console.log('only 2 european countries per group');
		return false;
	}
	else{
		console.log('counter :'+ counter + ' '+sameGroups);
		tableTD.html('<img src="' + currentTeam.attr('src') + '" class="' + currentTeam.attr('class') + currentTeam.data('name')+'">');
		return true;
	}
	/*if((continentClass !='europe') && sameGroups.children(continentClass).length==0){
		console.log('counter :'+ counter + ' '+sameGroups);
		tableTD.html('<img src="' + currentTeam.attr('src') + '" class="' + currentTeam.attr('class') + currentTeam.data('name')+'">');
		return true;
	}else if(sameGroups.children(continentClass).not('.europe').length>0){
		console.log('no two countries from same continent');
		return false;
	}else if(continentClass == 'europe' && sameGroups.children(continentClass).length>1){
		console.log('just two european countries per group');
		return false;
	}*/
	/*$('td.'+getGroupClass).each(function(index){
		if($(this).find(continentClass).not('.europe').length>0){
			return false;
		}else if(continentClass=='europe' && $(this).find(continentClass).length>1){
			return false;
		} else{
			tableTD.html('<img src="' + currentTeam.attr('src') + '" class="' + currentTeam.attr('class') + currentTeam.data('name') + '">');
			return false;
		}
	});*/
}
＆＃13; 
body,html{
	height:100%;
	width:100%;
}
header{
	background-image:url('https://assets.hrc.org//files/images/blog/Russia-Flag-1600x900.jpg');
	background-repeat:no-repeat;
	background-size:100% 100%;
	height:150px;
	width:100%;
	padding-top:10px;
	color:yellow;
	text-transform:uppercase;
	text-align:center;
}
header h1{
	line-height:100px;
}
div.seeds{
	float:right;
	width:500px;
	background-color:lightblue;
	height:850px;
	font-size:0;
	text-align:center;
}

div.seeds div h1{
	font-weight:normal;
	font-size:18px;
	margin:10px;
}
/*div.seeds div:first-child, div.seeds div:nth-child(2n){*/
div.seeds div{
	vertical-align:top;
}
div.seeds div:nth-child(-n+4){
	display:inline-block;
	width:120px;
	border-bottom:1px solid rgba(0,0,0,0.1);
}
div.seeds img{
	width:80px;
	height:80px;
	padding:10px;
}
div.main button{
	border:none;
	border-radius:3px;
	padding:15px;
	font-size:15px;
	display:block;
}
table{
	margin-top:10px;
	border-collapse:collapse;
	border:1px solid rgba(0,0,0,0.3);
	text-align:center;
}
table thead tr{
	border-bottom:1px solid rgba(0,0,0,0.3);
}
td img{
	height:50px;
	width:50px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<header>
			<h1>Russia world cup</h1>
		</header>
		<div class="seeds">
			<div class="firstSeed">
				<h1>First seed</h1>
				<img src="https://upload.wikimedia.org/wikipedia/en/thumb/b/ba/Flag_of_Germany.svg/1200px-Flag_of_Germany.svg.png" class="europe first" data-name=" Germany">
				<img src="https://upload.wikimedia.org/wikipedia/en/thumb/0/05/Flag_of_Brazil.svg/1280px-Flag_of_Brazil.svg.png" class="southAmerica first" data-name=" Brazil">
				<img src="https://southcoastherald.co.za/wp-content/uploads/sites/52/2015/03/portuguese-flag-wikipedia.jpg" class="europe first" data-name=" Portugal">
				<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Flag_de_Marina_Argentina_%281818%29.svg/2000px-Flag_de_Marina_Argentina_%281818%29.svg.png" class="southAmerica first" data-name=" Argentina">
				<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/Flag_of_Belgium.svg/2000px-Flag_of_Belgium.svg.png" class="europe first" data-name=" Belgium">
				<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Zastava_Kranja.svg/800px-Zastava_Kranja.svg.png" class="europe first" data-name=" Poland">
				<img src="https://upload.wikimedia.org/wikipedia/en/thumb/c/c3/Flag_of_France.svg/1280px-Flag_of_France.svg.png" class="europe first" data-name=" France">
			</div>
			<div>
				<h1>Second seed</h1>
				<img src="http://static.donquijote.org/images/culture/spanish_flag2.jpg" class="europe second" data-name=" Spain">
				<img src="http://peruflag.facts.co/peruflagof/PeruFlagImage.jpg" class="southAmerica second" data-name=" Peru">
				<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Civil_Ensign_of_Switzerland.svg/320px-Civil_Ensign_of_Switzerland.svg.png" class="europe second" data-name=" Switzerland">
				<img src="https://upload.wikimedia.org/wikipedia/en/thumb/b/be/Flag_of_England.svg/1200px-Flag_of_England.svg.png" class="europe second" data-name=" England">
				<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Flag_of_Colombia.svg/255px-Flag_of_Colombia.svg.png" class="southAmerica second" data-name=" Colombia">
				<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Flag_of_Mexico.svg/2000px-Flag_of_Mexico.svg.png" class="northCentralAmerica second" data-name=" Mexico">
				<img src="http://www.worldatlas.com/webimage/flags/countrys/zzzflags/uylarge.gif" class="southAmerica second" data-name=" Uruguay">
				<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Flag_of_Croatia.svg/2000px-Flag_of_Croatia.svg.png" class="europe second" data-name=" Croatia">
			</div>
			<div>
				<h1>Third seed</h1>
				<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Flag_of_Denmark.svg/2000px-Flag_of_Denmark.svg.png" class="europe third" data-name=" Denmark">
				<img src="http://icelandflag.facts.co/icelandflagof/IcelandFlagImage.png" class="europe third" data-name=" Iceland">
				<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Flag_of_Costa_Rica_%28state%29.svg/2000px-Flag_of_Costa_Rica_%28state%29.svg.png" class="northCentralAmerica third" data-name=" Costa_Rica">
				<img src="https://images-na.ssl-images-amazon.com/images/I/31QFtg6TJdL.jpg" class="europe third" data-name=" Sweden">
				<img src="http://www.flagfocus.info/images/Flags/Tunisia.png" class="africa third" data-name=" Tunisia">
				<img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/Flag_of_Egypt_%28variant%29.png" class="africa third" data-name=" Egypt">
				<img src="http://flagpedia.net/data/flags/ultra/sn.png" class="africa third" data-name=" Senegal">
				<img src="https://jsis.washington.edu/wordpress/wp-content/uploads/2016/01/iran-162321_640.png" class="asia third" data-name=" Iran">
			</div>
			<div>	
				<h1>Forth seed</h1>
				<img src="http://flagpedia.net/data/flags/ultra/rs.png" class="europe forth" data-name=" Serbia">
				<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Flag_of_Nigeria.png/1024px-Flag_of_Nigeria.png" class="africa forth" data-name=" Nigeria">
				<img src="https://upload.wikimedia.org/wikipedia/en/thumb/b/b9/Flag_of_Australia.svg/1280px-Flag_of_Australia.svg.png" class="asia forth" data-name=" Australia">
				<img src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9e/Flag_of_Japan.svg/1280px-Flag_of_Japan.svg.png" class="asia forth" data-name="J apan">
				<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Flag_of_Morocco_%28unbordered_light_green%29.svg/2000px-Flag_of_Morocco_%28unbordered_light_green%29.svg.png" class="africa forth" data-name=" Morocco">
				<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Flag_of_Panama.svg/2000px-Flag_of_Panama.svg.png" class="northCentralAmerica forth" data-name=" Panama">
				<img src="https://upload.wikimedia.org/wikipedia/commons/0/0f/Flag_of_South_Korea.png" class="asia forth" data-name=" South_Korea">
				<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Flag_of_Saudi_Arabia.svg/2000px-Flag_of_Saudi_Arabia.svg.png" class="asia forth" data-name=" Saudi_Arabia">
			</div>
			
		</div>
		
		<div class="main">
			<table>
				<thead>
					<tr>
						<th>Group A:</th>
						<th>Group B:</th>
						<th>Group C:</th>
						<th>Group D:</th>
						<th>Group E:</th>
						<th>Group F:</th>
						<th>Group G:</th>
						<th>Group H:</th>
					</tr>
				</thead>
				<tr class="first">
					<td class="groupA"><img class="europe" data-name="Russia" src="https://assets.hrc.org//files/images/blog/Russia-Flag-1600x900.jpg"></td>
					<td class="groupB"></td>
					<td class="groupC"></td>
					<td class="groupD"></td>
					<td class="groupE"></td>
					<td class="groupF"></td>
					<td class="groupG"></td>
					<td class="groupH"></td>
				</tr>
				<tr class="second">
					<td class="groupA"></td>
					<td class="groupB"></td>
					<td class="groupC"></td>
					<td class="groupD"></td>
					<td class="groupE"></td>
					<td class="groupF"></td>
					<td class="groupG"></td>
					<td class="groupH"></td>
				</tr>
				<tr class="third">
					<td class="groupA"></td>
					<td class="groupB"></td>
					<td class="groupC"></td>
					<td class="groupD"></td>
					<td class="groupE"></td>
					<td class="groupF"></td>
					<td class="groupG"></td>
					<td class="groupH"></td>
				</tr>
				<tr class="forth">
					<td class="groupA"></td>
					<td class="groupB"></td>
					<td class="groupC"></td>
					<td class="groupD"></td>
					<td class="groupE"></td>
					<td class="groupF"></td>
					<td class="groupG"></td>
					<td class="groupH"></td>
				</tr>
			</table>
			<button class="put">Put team</button>
		</div>
＆＃13;
＆＃13;
＆＃13;

https://jsfiddle.net/bmjytuxj/show/ https://jsfiddle.net/bmjytuxj/

0 个答案:

没有答案
相关问题
最新问题