在JavaScript中,如何使用jQuery更新属性 $(文档).ready(函数(){ var hero_image=新数组(); hero_图像[0]=新图像(); hero_image[0].src='assets/images/link.png'; hero_图像[0]。id='image'; 英雄形象[1]=新形象(); hero_image[1].src='assets/images/bongo.png'; hero_image[1]。id='image'; 英雄形象[2]=新形象(); hero_image[2].src='assets/images/gandondorf.jpg'; hero_image[2]。id='image'; 英雄形象[3]=新形象(); hero_image[3].src='assets/images/queen.png'; hero_image[3]。id='image'; var young_hero=[“链接”、“邦戈邦戈”、“甘多夫”、“戈玛女王”]; var health=[100,70,120,50]; 无功功率=[]; var计数器功率=[]; console.log(hero_image[0]); 函数it_是_超过_9000(){ for(var i=0;i
我正在尝试制作一个RPG游戏,我也在$(“.defend_按钮”)上按我想要的方式生成角色。在(“click”,function()上,它不会像应该的那样更新数据运行状况。它只更新一次,但在多次单击defend按钮后,它不会在第一次更新之后更新在JavaScript中,如何使用jQuery更新属性 $(文档).ready(函数(){ var hero_image=新数组(); hero_图像[0]=新图像(); hero_image[0].src='assets/images/link.png'; hero_图像[0]。id='image'; 英雄形象[1]=新形象(); hero_image[1].src='assets/images/bongo.png'; hero_image[1]。id='image'; 英雄形象[2]=新形象(); hero_image[2].src='assets/images/gandondorf.jpg'; hero_image[2]。id='image'; 英雄形象[3]=新形象(); hero_image[3].src='assets/images/queen.png'; hero_image[3]。id='image'; var young_hero=[“链接”、“邦戈邦戈”、“甘多夫”、“戈玛女王”]; var health=[100,70,120,50]; 无功功率=[]; var计数器功率=[]; console.log(hero_image[0]); 函数it_是_超过_9000(){ for(var i=0;i,javascript,jquery,Javascript,Jquery,我正在尝试制作一个RPG游戏,我也在$(“.defend_按钮”)上按我想要的方式生成角色。在(“click”,function()上,它不会像应该的那样更新数据运行状况。它只更新一次,但在多次单击defend按钮后,它不会在第一次更新之后更新 $(document).ready(function() { var hero_image = new Array(); hero_image[0] = new Image(); hero_image[0].src = 'ass
$(document).ready(function() {
var hero_image = new Array();
hero_image[0] = new Image();
hero_image[0].src = 'assets/images/link.png';
hero_image[0].id = 'image';
hero_image[1] = new Image();
hero_image[1].src = 'assets/images/bongo.png';
hero_image[1].id = 'image';
hero_image[2] = new Image();
hero_image[2].src = 'assets/images/gandondorf.jpg';
hero_image[2].id = 'image';
hero_image[3] = new Image();
hero_image[3].src = 'assets/images/queen.png';
hero_image[3].id = 'image';
var young_hero = ["Link", "Bongo Bongo", "Gandondorf", "Queen Gohma"];
var health = [100, 70, 120, 50];
var attack_power = [];
var counter_power = [];
console.log(hero_image[0]);
function it_is_over_9000(){
for (var i = 0; i < young_hero.length; i++) {
var x = Math.floor(Math.random(attack_power)*20) + 3;
var y = Math.floor(Math.random(attack_power)*10) + 3;
attack_power.push(x);
counter_power.push(y);
}
}
function ready_board(){
it_is_over_9000();
for (var i = 0; i < young_hero.length; i++) {
var hero_btns = $("<button>");
hero_btns.addClass("hero hero_button");
hero_btns.attr({
"data-name": young_hero[i],
"data-health": health[i],
"data-image": hero_image[i],
"data-attack": attack_power[i],
"data-counter": counter_power[i],
"data-index": i
});
hero_btns.text(young_hero[i]);
hero_btns.append(hero_image[i]);
hero_btns.append(health[i]);
$("#buttons").append(hero_btns);
}
}
function char(){
$(".hero_button").on("click", function() {
var hero = $(this);
var hero_select = hero.data('index');
for (var i = 0; i < young_hero.length; i++) {
//var attack = ;
if (i != hero_select){
var enemies = $("<button>");
enemies.addClass("hero enemy");
enemies.attr({
"data-power" : it_is_over_9000(),
"data-name": young_hero[i],
"data-health": health[i],
"data-image": hero_image[i],
"data-attack": attack_power[i],
"data-counter": counter_power[i],
"data-index": i
});
enemies.text(young_hero[i]);
enemies.append(hero_image[i]);
enemies.append(health[i]);
$("#battle").append(enemies);
}
}
$("#buttons").html($(this).data('name','health','image'));
defender();
});
}
function defender(){
$(".enemy").on("click", function() {
var enemy = $(this);
var enemy_select = enemy.data("index");
console.log(enemy_select);
for (var i = 0; i < young_hero.length; i++) {
if (i == enemy_select) {
var defender = $("<button>");
defender.addClass("hero defender");
defender.attr({
"data-name": young_hero[i],
"data-health": health[i],
"data-image": hero_image[i],
"data-attack": attack_power[i],
"data-counter": counter_power[i],
"data-index": i
});
defender.text(young_hero[i]);
defender.append(hero_image[i]);
defender.append(health[i]);
$("#defend").append(defender);
$(this).remove();
}
}
});
}
$(".defend_button").on("click" , function(){
if($(".defender").data("health") == 0){
$(".defender").remove();
}
$(".defender").attr({
"data-health": $(".defender").data("health") - $(".hero_button").data("attack")
});
});
ready_board();
char();
});
塞尔达
.hero{宽度:125px;高度:150px;边框样式:实心;填充:2px;浮点:左;边距:2px;浮点:左;}
.letter按钮颜色{color:darkcyan;}
.冰箱颜色{颜色:橙色;}
#显示{上边距:78px;高度:500px;宽度:220px;左边距:60px;}
#按钮{顶部填充:60px;}
#清除{左边距:20px;字体大小:25px;颜色:黑色;边框样式:实心;宽度:100px;}
#图像{宽度:100px;高度:100px;左边距:10px;}
选择你的角色
保卫
尝试这样设置属性。另外,我建议将$(“.defender”)
放入变量中,这样您就不会每次都重新查询它
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Zelda</title>
<script type='text/javascript' src='https://code.jquery.com/jquery-2.2.0.min.js'></script>
<script type = "text/javascript" src = "assets/javascript/game.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<style type="text/css">
.hero { width: 125px; height:150px; border-style: solid; padding: 2px; float: left; margin: 2px; float: left; }
.letter-button-color { color: darkcyan; }
.fridge-color { color: orange; }
#display { margin-top:78px; height:500px; width:220px; margin-left:60px; }
#buttons { padding-top:60px; }
#clear { margin-left: 20px; font-size: 25px; color: black; border-style: solid; width: 100px; }
#image{width: 100px; height: 100px; margin-left: 10px; }
</style>
<body>
<div class="row">
<div class="col-md-8">Select Your Character</div>
</div>
<div class="row">
<div id="buttons" class="col-md-8"></div>
</div>
<div class="row">
<div id="battle" class="col-md-8">
</div>
</div>
<div class="row">
<div class="col-md-8">
<button class="btn btn-primary defend_button">Defend</button>
</div>
</div>
<div class="row">
<div id="defend">
</div>
</div>
</body>
</html>
更新:
看起来,$('.defender')
调用将返回多个项目。您需要选择一个特定的defender
,或者像这样逐个遍历它们:
var defender = $(".defender");
var loweredHealth = defender.data("health") - $(".hero_button").data("attack");
defender.attr('data-health`, loweredHealth);
必须使用
.data()
更新运行状况值
$('.defender').each(function(i, nextDefender) {
var loweredHealth = nextDefender.data("health") - $(".hero_button").data("attack");
nextDefender.attr('data-health`, loweredHealth);
});`
我玩了一点你的游戏。我还发现了如何更新图像下方的健康显示…
因为仅仅更新数据并没有改变屏幕上的任何东西 因此,我将上面的代码留在那里,让您看到它有效地工作。
但是,因为你必须重新创建按钮来更新scrreen上的运行状况…这是一种无用的操作 我还修复了死亡条件
从
if($(“.defender”).data(“健康状况”)==0{
至
if($(“.defender”).data(“健康”)那么你有多少防御者?你使用应用于许多按钮的.hero_按钮对所有防御者应用/减少数据健康状况。所有代码都有效,唯一的问题是只在JSFIDLE上更新一次?你有4个防御者和4个英雄。在中,单击“防御_按钮”
即可使用jQuery类选择器$(“.defender”)
。现在有4项与此匹配,因为更新例程都在工作,所以最终将应用于所有4项。以及设置$(“.defender”).attr({“数据运行状况”:$(“.defender”).data(“运行状况”)的数据运行状况属性
var battleResult = $(".defender").data("health") - $(".hero_button").data("attack");
console.log("battleResult should be: "+battleResult );
$(".defender").data({
"health": battleResult
});