每个 div 中的随机数答案

【问题标题】：random numbers in each div每个 div 中的随机数
【发布时间】：2011-10-24 11:59:09
【问题描述】：

我正在尝试对其进行编码，以便在单击每个 div 时显示随机数，而不是在选择一个 div 时显示所有 div。正确的随机数同时出现在我的所有 div 中。 I also have random colors that show up individually when each div is selected.随机颜色方法正是我想要数字做的。下面是我的代码。我是 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>

【问题讨论】：

标签： javascript html random numbers

【解决方案1】：

您正在使用为事件绑定选择所有div 元素的相同选择器，而不是访问被单击的特定元素。

改变这个：

$('div.color1').click(function () {
  var number = 1 + Math.floor(Math.random() * 50);
  $('div.color1').text(number);
}

到：

$('div.color1').click(function () {
  var number = 1 + Math.floor(Math.random() * 50);
  $(this).text(number);
}

此外，您正在使用setInterval 运行该代码，句点为 0，这意味着它将尽可能快地一次又一次地绑定点击事件。当您单击该元素时，您将调用事件处理程序数千次。一段时间后，浏览器将有数百万个事件处理程序绑定到元素，并且会崩溃。去掉绑定点击事件的代码周围的setInterval代码。

【讨论】：