文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >使用jquery显示数据时出现问题

问使用jquery显示数据时出现问题
EN

Stack Overflow用户
提问于 2016-05-19 07:58:11
回答 2查看 38关注 0票数 1

有人能帮我写这段代码吗？我试图用jquery填充我的DIVs，但它看起来编译器从来没有进入"each“循环，当我在浏览器中运行时，只出现我的css框。我试着在each之前输入任何代码，它运行正常，问题只在each中。

代码语言：javascript
复制
<!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>

​

javascript
jquery
html
css
EN

回答 2

Stack Overflow用户

发布于 2016-05-19 08:08:15

回调语法不正确。

替换

代码语言：javascript
复制
$(document).ready(inicio());

使用

代码语言：javascript
复制
$(document).ready(inicio);

请注意， .ready() 需要一个回调函数作为引用，而不是直接在那里执行它。

还要注意，您的代码缺少一个结束的HTML标记- </html>

请阅读：.ready() | jQuery API Documentation

修复版本：

​

​

代码语言：javascript
复制
<!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
EN

Stack Overflow用户

发布于 2016-05-19 08:05:20

将"each“循环放在$( document ).ready()中，如下所示

代码语言：javascript
复制
$( 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标签的末尾。它应该是可行的

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/37311889

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档