我正在制作一个世界杯小组赛阶段抽奖网站。 当我检查某些类是否已经具有相同的类
时,我对算法有一些问题查找并将img放入空td工作但浏览器不检查某些类是否已经有一个具有相同类的子img。
我的代码出了什么问题?
结果:
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;
https://jsfiddle.net/bmjytuxj/show/ https://jsfiddle.net/bmjytuxj/