html - comparing image src jquery -
i making game there 12 cards turned upside down. when click on card flips on image there 2 of every image total of 6 images on 12 cards. point match images. having trouble comparing if img src same of flipped images here have far:
<div class="container"> <div class="row"> <div></div> <div></div> <div></div> <div></div> </div> <div class="row"> <div></div> <div></div> <div></div> <div></div> </div> <div class="row"> <div></div> <div></div> <div></div> <div></div> </div> </div> <form> <input type="button" value="play again"> </form>
the script should this:
var lastselected; $(document).ready(function(){ addimg(); start(); click(); }); function check(el){ if($(lastselected).attr("src") == $(el).find("img").attr("src") && $(lastselected).hasclass("visible")) { // sth. $(this) alert("gotcha!"); } lastselected = $(el).find("img"); } function start(){ $("div.row div img").addclass("hidden"); }; function click(){ $("div.row div").each(function(){ $(this).click(function(){ if($("img", this).hasclass("hidden")){ $("img",this).removeclass("hidden"); $("img",this).addclass("visible"); check($(this)); }else if($("img",this).hasclass("visible")){ $("img",this).removeclass("visible"); $("img",this).addclass("hidden"); } }); }); }; function addimg (){ var images = ["http://efreeman.userworld.com/jquery/images/cheese.gif","http://efreeman.userworld.com/jquery/images/eggs.gif","http://efreeman.userworld.com/jquery/images/kitchen_blender.gif","http://efreeman.userworld.com/jquery/images/tea.gif","http://efreeman.userworld.com/jquery/images/kitchen_collander.gif","http://efreeman.userworld.com/jquery/images/kitchen_teapot.gif"]; var imagesused = []; $('.container div:not(.row)').each(function() { var rand = math.floor(math.random() * images.length); $(this).append('<img src="' + images[rand] + '"/>'); if (imagesused.indexof(images[rand]) != -1) images.splice(rand, 1); else imagesused.push(images[rand]); console.log(images); }); }
Comments
Post a Comment