I'm trying to make a simple flash-card game in JavaScript using JQuery. In one part of the game, you should click on a row in a "table" ( tablica
) made out of div
s ( tablica[i][j]
) to swap the cells in that row (to put the content in the cell in the correct column). Here is the relevant piece of code:
for (var j=0; j<odgovor1.length; j++)
for (var i=1; i<3; i++)
{
tablica[i][j]=document.createElement("div");
tablica[i][j].setAttribute("class","rijecUDrugomDijelu");
if (i===1) tablica[i][j].appendChild(document.createTextNode(odgovor1[j]));
else if (i===2) tablica[i][j].appendChild(document.createTextNode(odgovor2[j]));
tablica[i][j].style.top=228+27*j;
tablica[i][j].style.left=-153+110+153*i;
tablica[i][j].onclick=eval(
"(function()"+
"{"+
"var tmp=tablica[1]["+j+"].style.left;"+
"tablica[1]["+j+"].style.left=tablica[2]["+j+"].style.left;"+
"tablica[2]["+j+"].style.left=tmp;"+
"tmp=odgovor1["+j+"];"+
"odgovor1["+j+"]=odgovor2["+j+"];"+
"odgovor2["+j+"]=tmp;"+
"})"
);
pozadina.appendChild(tablica[i][j]);
}
When the user clicks on a row in that table, the cells in that row are swapped, and the content of the table is correctly tracked in the string arrays odgovor1
and odgovor2
. However, they are swapped without any animation, they are swapped immediately. When I try to apply JQuery animations to the cells ( div
s) tablica[1][j]
and tablica[2][j]
, the program crashes. Do you know how to do that properly?
Again, I assure you, the code above works well now, but when I try to use JQuery animations instead of simply swapping the properties style.left
, it crashes.
Using object properties instead of eval
appears to work:
for (var j=0; j<odgovor1.length; j++)
for (var i=1; i<3; i++)
{
tablica[i][j]=document.createElement("div");
tablica[i][j].setAttribute("class","rijecUDrugomDijelu");
if (i===1) tablica[i][j].appendChild(document.createTextNode(odgovor1[j]));
else if (i===2) tablica[i][j].appendChild(document.createTextNode(odgovor2[j]));
tablica[i][j].style.top=228+27*j;
tablica[i][j].style.left=-153+110+153*i;
tablica[i][j].redak=j;
tablica[i][j].onclick=
function()
{
var tmp=tablica[1][this.redak].style.left;
$(tablica[1][this.redak]).animate({left:(tablica[2][this.redak].style.left)},500);
$(tablica[2][this.redak]).animate({left:(tmp)},500);
tmp=odgovor1[this.redak];
odgovor1[this.redak]=odgovor2[this.redak];
odgovor2[this.redak]=tmp;
}
pozadina.appendChild(tablica[i][j]);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.