Hey

I can't find what's wrong with the code. But it looks like it doesn't assign the 'has_staff' class as all the div colours after clicking on them appear red.
It's taken from Head First jQuery book I just altered the code a little for my version.

HTML Code:
<html>
	<head>
		<title>Wizards</title>
		<link href="styles/style2.css" rel="stylesheet">
		<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	</head>
	<body>
	<div id="header">
		<h2>The Epic Wizards' Battle</h2>
	</div>
	<div id="main">
		<div class="guess_box"><img src="images/wizard1.jpg"/></div>
		<div class="guess_box"><img src="images/wizard2.jpg"/></div>
		<div class="guess_box"><img src="images/wizard3.jpg"/></div>
		<div class="guess_box"><img src="images/wizard4.jpg"/></div>
		<span id="result"></span>
	</div>

<script src="scripts/scriptsForWizards.js"></script>
	</body>
</html>
jQuery:
Code:
	$(document).ready(function() {

		$(".guess_box").click( checkForStaff );
	function getRandom(num){
		var number1 = Math.floor((Math.random()*num) + 20);
		return number1;
	}
	
	var hideCode = function() {
		var numRand = getRandom(4);
		$(".guess_box").each(function(index, value) {
			if (numRand == index) {
				$(this).append("<span id='has_staff'></span>");
				return false;
			}
		});
	}
	
hideCode();

	function checkForStaff() {
		var attack;
		if($.contains(this, document.getElementById("has_staff") ) )
		{
			var damage = getRandom(80);
			var spells = Array("Fireball", "Thunder Bolt", "Magic Missile", "Ray of Frost");
			var spell = spells[Math.floor(Math.random()*spells.length)];

			attack = "<p>I'm casting "+ spell +"</p>" + "<p>Damage: " + damage + "</p>";

		}
		else {
			attack = "<p>Sorry, you failed to find the staff!</p>" ;
		}
		$(this).append(attack);
		
		$(".guess_box").each( function() {
			if($.contains(this, document.getElementById("has_staff")))
			{
			$(this).addClass("staff");
			}else{
			$(this).addClass("no_staff");
			}
			$(this).unbind();
		});
	}

	$(".guess_box").hover(
	function () {
		// this is the mouseenter event handler
		$(this).addClass("my_hover");
	},
	function () {
		// this is the mouseleave event handler
		$(this).removeClass("my_hover");
	});
	$("#result").append(attack);
}); //End document.ready()
CSS:
Code:
div{
	float:left;
	height:245px;
	text-align:left;
	border: solid #000 3px;
}
#header{
	width:100%;
	border:0px;
	height:50px;
}
#main{
	background-color:grey;
	height: 500px;
}
.guess_box {
	height:264px;
}
.my_hover{
border: solid #00f 3px;
}

.staff {
border: solid #0f0 3px;
}
.no_staff {
border: solid #f00 3px;
}
Thx for help