1. Zuhause
  2. Frage und Antwort
  3. Probleme beim Anzeigen von Daten mit Jquery

Probleme beim Anzeigen von Daten mit Jquery

2016-05-18 18 views
1

Kann jemand helpme mit diesem Code? Ich versuche, meine DIVs mit jQuery zu füllen, aber es sieht so aus, als würde der Compiler niemals in den "Every" -Zyklus eintreten und wenn ich im Browser laufe, erscheinen nur meine CSS-Boxen. Ich habe versucht, jeden Code vor jedem einzugeben und es lief in Ordnung, das Problem ist nur in jedem.Probleme beim Anzeigen von Daten mit Jquery

<!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>

Quelle

2016-05-18 Mario Meza

Antwort

0

Setzen Sie die "jedes" -Zyklus in $ (document) .ready() wie dieses

$(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>"); 
      }); 
});

Oder das Skript im Ende des Body-Tag legen. Es sollte funktionieren

Quelle

2016-05-19 00:05:20

1

Ihre Rückrufsyntax ist falsch. Ersetzen

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

mit

$(document).ready(inicio);

Beachten Sie, dass .ready() eine Rückruffunktion als Referenz erwartet und es ist nicht richtig dort auszuführen.

Beachten Sie auch, dass Ihr Code eine Endung HTML-Tag fehlt - </html>

Lesen up:.ready() | jQuery API Documentation

Festgelegte Version: 

<!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>

Quelle

2016-05-19 00:08:14

+0

tha nkssssss, es hat funktioniert :) –

+0

@MarioMeza Ich bin froh, dass es geholfen hat :) Bitte upvote und markieren Sie diese Antwort als akzeptiert. –

Verwandte Themen

 Verwandte Themen