用jquery显示数据的麻烦

时间：2016-05-18 23:58:11

标签： javascript jquery html css

任何人都可以使用此代码吗？我试图用jquery填充我的DIV，但看起来编译器永远不会进入“每个”循环，当我在浏览器中运行时只出现我的css框。我尝试在每个代码之前输入任何代码并且运行正常，麻烦只发生在每个代码中。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<title>Memoria</title>  
    <style>
    #tablero{

        width: 650px;
        margin: 10px auto;
    }
        .cartas{                
            border-radius:1em;
            border:3px solid white;
            background-color:#F93;
            cursor:pointer;
            display:inline-block;
            height:110px;
            width:110px;
            margin:.3em;
            overflow:hidden;
            vertical-align:top;

        }

        #tiempo{

            float:left;
            font-size:30px;
        }

        #score{
            float:right;
            font-size:30px;
        }

            #tablero p
            {
                color: #FFFFFF;
                margin-top:1.2em; 
                text-align: center;
                z-index: -1;
                font-size:30px;
                display: inline-block;
            }



    </style>

    <script>

    $(document).ready(inicio());    
   function inicio(){

            cargaCartas();
          }

       function cargaCartas(){

        var cartas_array=new Array();
        var num=0;
        var n=0;
        var i=1;



                cartas_array.push({c:"8+4", r:12}); 
                cartas_array.push({c:"12", r:12});
                cartas_array.push({c:"10/2", r:5}); 
                cartas_array.push({c:"5", r:5}); 
                cartas_array.push({c:"8-4", r:4});
                cartas_array.push({c:"4", r:4}); 
                cartas_array.push({c:"2*3", r:6});
                cartas_array.push({c:"6", r:6}); 
                cartas_array.push({c:"5+5", r:10}); 
                cartas_array.push({c:"10", r:10}); 
                cartas_array.push({c:"10-9", r:1});
                cartas_array.push({c:"1", r:1}); 
                cartas_array.push({c:"1+1", r:2}); 
                cartas_array.push({c:"2", r:2}); 
                cartas_array.push({c:"10-7", r:3}); 
                cartas_array.push({c:"3", r:3}); 
                cartas_array.push({c:"4+3", r:7}); 
                cartas_array.push({c:"7", r:7}); 
                cartas_array.push({c:"16/2", r:8}); 
                cartas_array.push({c:"8", r:8});



            $('.cartas').each(function(i){
                num=cartas_array.length;
                n=Math.floor(Math.random()*num);
                $(this).html("<p>"+cartas_array[n].c+"</p>");
            });


              };

        </script>

</head>
<body>              
            <div id="tablero">                
              <div class="cartas" data-num=""></div>
              <div class="cartas" data-num=""></div>
              <div class="cartas" data-num=""></div>
              <div class="cartas" data-num=""></div>
              <div class="cartas" data-num=""></div>
              <br>
              <div class="cartas" data-num=""></div>
              <div class="cartas" data-num=""></div>
              <div class="cartas" data-num=""></div>
              <div class="cartas" data-num=""></div>
              <div class="cartas" data-num=""></div>
              <br>
              <div class="cartas" data-num=""></div>
              <div class="cartas" data-num=""></div>
              <div class="cartas" data-num=""></div>
              <div class="cartas" data-num=""></div>
              <div class="cartas" data-num=""></div>
              <br>
              <div class="cartas" data-num=""></div>
              <div class="cartas" data-num=""></div>
              <div class="cartas" data-num=""></div>
              <div class="cartas" data-num=""></div>
              <div class="cartas" data-num=""></div>
              <br>
                <div id="marcador">
                <div id="tiempo">00:00:00</div>
                <div id="score">Score: 0</div>

                </div>
            </div>      


</body>

2 个答案:

答案 0 :(得分：1)

您的回调语法不正确。

替换

$(document).ready(inicio());

与

$(document).ready(inicio);

请注意，.ready()需要一个回调函数作为参考，而不是在那里执行。

另请注意，您的代码缺少结束HTML标记 - </html>

阅读： .ready() | jQuery API Documentation

<小时/> 修正版： 

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <title>Memoria</title>  
    <style>
      #tablero{

        width: 650px;
        margin: 10px auto;
      }
      .cartas{                
        border-radius:1em;
        border:3px solid white;
        background-color:#F93;
        cursor:pointer;
        display:inline-block;
        height:110px;
        width:110px;
        margin:.3em;
        overflow:hidden;
        vertical-align:top;

      }

      #tiempo{

        float:left;
        font-size:30px;
      }

      #score{
        float:right;
        font-size:30px;
      }

      #tablero p
      {
        color: #FFFFFF;
        margin-top:1.2em; 
        text-align: center;
        z-index: -1;
        font-size:30px;
        display: inline-block;
      }



    </style>

    <script>

      $(document).ready(inicio);
      function inicio(){

        cargaCartas();
      }

      function cargaCartas(){

        var cartas_array=[];
        var num=0;
        var n=0;
        var i=1;



        cartas_array.push({c:"8+4", r:12}); 
        cartas_array.push({c:"12", r:12});
        cartas_array.push({c:"10/2", r:5}); 
        cartas_array.push({c:"5", r:5}); 
        cartas_array.push({c:"8-4", r:4});
        cartas_array.push({c:"4", r:4}); 
        cartas_array.push({c:"2*3", r:6});
        cartas_array.push({c:"6", r:6}); 
        cartas_array.push({c:"5+5", r:10}); 
        cartas_array.push({c:"10", r:10}); 
        cartas_array.push({c:"10-9", r:1});
        cartas_array.push({c:"1", r:1}); 
        cartas_array.push({c:"1+1", r:2}); 
        cartas_array.push({c:"2", r:2}); 
        cartas_array.push({c:"10-7", r:3}); 
        cartas_array.push({c:"3", r:3}); 
        cartas_array.push({c:"4+3", r:7}); 
        cartas_array.push({c:"7", r:7}); 
        cartas_array.push({c:"16/2", r:8}); 
        cartas_array.push({c:"8", r:8});



        $('.cartas').each(function(i){
          num=cartas_array.length;
          n=Math.floor(Math.random()*num);
          $(this).html("<p>"+cartas_array[n].c+"</p>");
        });


      };

    </script>

  </head>
  <body>              
    <div id="tablero">                
      <div class="cartas" data-num=""></div>
      <div class="cartas" data-num=""></div>
      <div class="cartas" data-num=""></div>
      <div class="cartas" data-num=""></div>
      <div class="cartas" data-num=""></div>
      <br>
      <div class="cartas" data-num=""></div>
      <div class="cartas" data-num=""></div>
      <div class="cartas" data-num=""></div>
      <div class="cartas" data-num=""></div>
      <div class="cartas" data-num=""></div>
      <br>
      <div class="cartas" data-num=""></div>
      <div class="cartas" data-num=""></div>
      <div class="cartas" data-num=""></div>
      <div class="cartas" data-num=""></div>
      <div class="cartas" data-num=""></div>
      <br>
      <div class="cartas" data-num=""></div>
      <div class="cartas" data-num=""></div>
      <div class="cartas" data-num=""></div>
      <div class="cartas" data-num=""></div>
      <div class="cartas" data-num=""></div>
      <br>
      <div id="marcador">
        <div id="tiempo">00:00:00</div>
        <div id="score">Score: 0</div>

      </div>
    </div>      


  </body>
</html>

答案 1 :(得分：0)

将“each”循环放在$（document）.ready（）中，如下所示

$( document ).ready(function() {

 $('.cartas').each(function(i){
                num=cartas_array.length;
                n=Math.floor(Math.random()*num);
                $(this).html("<p>"+cartas_array[n].c+"</p>");
            });
});

或将脚本放在body标记的末尾。它应该工作

相关问题
最新问题