gpt4 book ai didi

javascript - 使用 jquery 显示数据时遇到问题

转载 作者:行者123 更新时间:2023-11-28 16:18:19 24 4
gpt4 key购买 nike

谁能帮我写这段代码?我正在尝试使用 jquery 填充我的 DIV,但看起来编译器从未进入“每个”循环,当我在浏览器中运行时只出现我的 css 框。我尝试在 each 之前输入任何代码,它运行正常,问题只在于 each。

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

最佳答案

您的回调语法不正确。

替换

$(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>

关于javascript - 使用 jquery 显示数据时遇到问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37311889/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com