How to move 52 divs in a predetermined order

I have 52 divs, each containing a playing card image and each div having an id.
I wish a user to be able to move each div via a click, but have each div only moving when they are clicked in a certain order. In the following code the order of the div movements is #Du1, then #A1,then #D1 with #A1 being automatically moved which works fine for the first three divs. Any suggestions on a better way to do this would be greatly appreciated by a JQuery beginner.

("#Du1").click(function(){ ("#Du1").offset({top: 235, left: 800});
setTimeout("('#A1').offset({top: 325, left: 1030});",1000); ("#D1").click(function(){
$("#D1").offset({top: 430, left: 800});

I would recommend creating an array for this, then you could match the index of that array quite easily in any order you wish. Though the specifics of this array would depend on what you intend to do with it. Do you wish to only check the last user action ,or perhaps keep track of a users actions over the period of the game? (Long term/Short term)

The other alternative I see being adding some other class to the divs clicked as markers (since you can only have one id) and checking which elements have these markers, sort through them to make your checks.

Also, instead of doing each did individually for all their code, you could refer to a much simpler $(this).click. You can learn a lot more jQuery tips and tricks in the “Make an interactive Website” Course as well as farther down the standard jQuery course.

I hope this helps! :+1:

1 Like