random numbers in each div
I am trying to code it so random numbers will show up when I click on each div and not all divs when one div is selected. Right the same random numbers show up in all my divs at the same time. I also have random colors that show up individually when each div is selected. The random color method is exactly what I want the numbers to do. Below is my code. I'm new to Jquery and have searched to try to find this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
section#wrapper{
width:500px;
height:500px;
margin:0 auto;
padding:0px;
-webkit-border-radius:20px;
-moz-border-radius: 20px;
border-radius: 20px;
boxshadow:
-moz-box-shadow: 5px 5px 5px #000;
box-shadow:5px 5px 5px #000;
-webkit-box-shadow: 5px 5px 5px #000;
background:#3开发者_C百科A4E7E;
}
div.color1 {
width:100px;
height:100px;
margin:10px;
padding:10px;
border:1px solid #fff;
position:relative;
float:left;
background:cornsilk;
-webkit-border-radius:10px;
-moz-border-radius: 10px;
border-radius: 10px;
boxshadow:
-moz-box-shadow: 0px 2px 2px #000;
box-shadow:0px 2px 2px #000;
-webkit-box-shadow: 0px 2px 2px #000;
top:40px;
left:40px;
text-align:center;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:36px;
color:#666;
vertical-align:middle;
}
body{
padding: 10%;
}
/*div.color2 {
width:100px;
height:100px;
margin:0px;
padding:0px;
border:1px solid #fff;
position:relative;
float:left;
background:red;
}*/
</style>
<script type="text/javascript" src="../project 1/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('div').each(function () {
$('div').click(function () {
var hue = 'rgb(' + (Math.floor((256 - 199) * Math.random()) + 200) + ',' + (Math.floor((256 - 199) * Math.random()) + 200) + ',' + (Math.floor((256 - 199) * Math.random()) + 200) + ')';
$(this).css("background-color", hue);
});
});
setInterval(function () {
$('div.color1').click(function () {
var number = 1 + Math.floor(Math.random() * 50);
$('div.color1').text(number);
}, 0);
});
});
</script>
</head>
<body>
<section id="wrapper">
<div class="color1"></div>
<div class="color1"></div>
<div class="color1"></div>
<div class="color1"></div>
<div class="color1"></div>
<div class="color1"></div>
<div class="color1"></div>
<div class="color1"></div>
<div class="color1"></div>
</section>
</body>
</html>
You are using the same selector that selects all the div elements for the event binding, instead of accessing the specific element that is clicked.
Change this:
$('div.color1').click(function () {
var number = 1 + Math.floor(Math.random() * 50);
$('div.color1').text(number);
}
to:
$('div.color1').click(function () {
var number = 1 + Math.floor(Math.random() * 50);
$(this).text(number);
}
Also, you are running that code using setInterval with a period of 0, that means that it will bind the click event over and over again as fast as it can. WHen you click the element you will be calling the event handler thousands of times. After a while the browser will have millions of event handlers bound to the elements, and will crash. Remove the setInterval code around the code that binds the click event.
加载中,请稍侯......
精彩评论