случайные числа в каждом div - PullRequest
Новая
       0

случайные числа в каждом div

0 голосов
/ 11 августа 2011

Я пытаюсь закодировать его, чтобы случайные числа отображались при нажатии на каждый элемент div, а не на все div, когда выбран один элемент div. Прямо одни и те же случайные числа появляются во всех моих делениях одновременно. У меня также есть случайные цвета, которые отображаются индивидуально, когда каждый div выбран. Метод случайных цветов - это именно то, что я хочу, чтобы числа делали. Ниже мой код. Я новичок в Jquery и искал, чтобы попытаться найти это. 

<!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:#3A4E7E;
    }
    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>

1 Ответ

2 голосов
/ 11 августа 2011

Вы используете тот же селектор, который выбирает все элементы div для привязки события вместо доступа к конкретному элементу, по которому щелкают.

Измените это: 

$('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);
}

Кроме того, вы запускаете этот код, используя setInterval с периодом 0, это означает, что он будет связывать событие click снова и снова так быстро, как только может.Когда вы нажимаете на элемент, вы будете вызывать обработчик событий тысячи раз.Через некоторое время браузер будет иметь миллионы обработчиков событий, связанных с элементами, и вылетит.Удалите код setInterval вокруг кода, связывающего событие click.

...