Javascript jquery addclass显示图像查询_Javascript_Jquery_Html_Web

Javascript jquery addclass显示图像查询

javascript jquery html web

Javascript jquery addclass显示图像查询,javascript,jquery,html,web,Javascript,Jquery,Html,Web,我正在写一个程序，其中有16个div，每个div都有一个唯一的类名，从11，12，13。。。44现在我已经编写了一个数学函数，可以从该数组中随机选择一个数字。我想知道如何找到带有随机选择的类名的div，然后我需要向这个div添加一个类有人能告诉我为什么随机选择的div（新类添加到其中）不显示background image.png吗 <head> <meta http-equiv="Content-Type" content="text/ht

我正在写一个程序，其中有16个div，每个div都有一个唯一的类名，从11，12，13。。。44现在我已经编写了一个数学函数，可以从该数组中随机选择一个数字。我想知道如何找到带有随机选择的类名的div，然后我需要向这个div添加一个类

有人能告诉我为什么随机选择的div（新类添加到其中）不显示background image.png吗

        <head>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                        <style>
                           .row
                          {
                            width:520px;
                            height:120px;
                            border-color:#333;
                            border-width:1px;
                          }
                           .sq-color
                          {
                            margin: 2px;
                            width:120px;
                            height:120px;
                            float:right;
                            background-color:#6C0;
                          }
                           .mole
                          {
                            background-image:url(images.jpg);
                          }
                   </style>

                    <script>

                           var items = Array(11,12,13,14,21,22,23,24,31,32,33,34,41,42,43,44);
                           var random = items[Math.floor(Math.random()*items.length)]

                           $('.c'+random).addClass('mole');


                   </script>


            <title>Untitled Document</title>
                </head>

                <body>
                    <div class="row">
                          <div class="sq-color c11"></div>
                          <div class="sq-color c12"></div>
                          <div class="sq-color c13"></div>
                          <div class="sq-color c14"></div>
                    </div>
                    <div class="row">
                          <div class="sq-color c21"></div>
                          <div class="sq-color c22"></div>
                          <div class="sq-color c23"></div>
                          <div class="sq-color c24"></div>
                    </div>
                    <div class="row">
                          <div class="sq-color c31"></div>
                          <div class="sq-color c32"></div>
                          <div class="sq-color c33"></div>
                          <div class="sq-color c34"></div>
                    </div>
                    <div class="row">
                          <div class="sq-color c41"></div>
                          <div class="sq-color c42"></div>
                          <div class="sq-color c43"></div>
                          <div class="sq-color c44"></div>
                    </div>
              </body>
  </html>

使用以下命令：

$(function() {
    var items = Array(11,12,13,14,21,22,23,24,31,32,33,34,41,42,43,44);
    var random = items[Math.floor(Math.random()*items.length)];

    $('.c'+random).addClass('mole');
});

当文件准备好时

编辑：

并添加jquery文件：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

您确定图像的名称对应并且位于正确的文件夹中吗？

$(function() {
    var i = new Image();
    i.src = 'images.jpg';
    i.onerror = function(e) {
        alert('error on load image');
    };

    var 
        items = Array(11,12,13,14,21,22,23,24,31,32,33,34,41,42,43,44),
        index = Math.floor(Math.random()*items.length), 
        random = items[index];

    $('.c'+random).addClass('mole');
});