Transforming puzzle written in pure javascript to javascript using jquery -
javascript
script:
function move(cellid, cell) { if (cellid==emptycell) return; rest = cellid % 5; toppos = (cellid>5) ? cellid-5 : -1; bottompos = (cellid<21) ? cellid+5 : -1; leftpos = (rest!=1) ? cellid-1 : -1; rightpos = (rest>0) ? cellid+1 : -1; if (emptycell!=toppos && emptycell!=bottompos && emptycell!=leftpos && emptycell!=rightpos) return; cell1 = document.getelementbyid(emptycell); img1 = cell1.firstchild; img = cell.firstchild; cell.removechild(cell.firstchild); cell1.removechild(cell1.firstchild); cell.appendchild(img1); cell1.appendchild(img); emptycell = cellid; }
html:
<table> <tr> <td id="1" onclick="move(1,this);"></td> <td id="2" onclick="move(2,this);"></td> <td id="3" onclick="move(3,this);"></td> <td id="4" onclick="move(4,this);"></td> <td id="5" onclick="move(5,this);"></td> </tr> <tr> <td id="6" onclick="move(6,this);"></td> .... </table>
javascript jquery
script:
$('td').click(function() { move(this.attr('id'), this); }); function move(cellid, cell) { if (cellid==emptycell) return; rest = cellid % 4; toppos = (cellid>5) ? cellid-4 : -1; bottompos = (cellid<13) ? cellid+4 : -1; leftpos = (rest!=1) ? cellid-1 : -1; rightpos = (rest>0) ? cellid+1 : -1; if (emptycell!=toppos && emptycell!=bottompos && emptycell!=leftpos && emptycell!=rightpos) return; cell1 = document.getelementbyid(emptycell); img1 = cell1.firstchild; img = cell.firstchild; cell.removechild(cell.firstchild); cell1.removechild(cell1.firstchild); cell.appendchild(img1); cell1.appendchild(img); emptycell = cellid; }
html:
<table> <tr> <td id="1" ></td> <td id="2" ></td> <td id="3" ></td> <td id="4" ></td> </tr> <tr> <td id="5" ></td> ... </table>
ok trying transform puzzle game javascript javascript using jquery library. succeeded loading part of puzzle in both javascript , jquery, in pieces of puzzle load on screen, cannot move
function work. move
function 1 supposed move pieces on click event. pure javascript part of code works completely. jquery part not.
can please enlighten me?
thanks.
well have million ways jquery. 1 of them following:
function movecells(cell1id, cell2id) { var cell1=$("#"+cell1id), // first cell cell2=$("#"+cell2id), // second cell cell1contents=cell1.html(), // whatever's inside 1st cell cell2contents=cell2.html(); // whatever's inside 2nd cell cell2.html(cell1contents); // put in 2nd cell whatever inside 1st cell1.html(cell2contents); // put in 1st cell whatever inside 2nd }
Comments
Post a Comment