Question

我正在尝试对其进行编码，因此当我单击每个div而不是所有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>

Answer 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);
}

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

每个div中的随机数

1 个答案: