从数组访问和显示对象

Question

 $(document).ready(function () { var cardplace = 1; var card = [ { name: "Lord salazar" , atk: "12" , def: "3" , id: "1" } , { name: "Master manga" , atk: "8" , def: "10" , id: "2" } ]; $("#draw").click(function drawcard() { var monster = card[Math.floor(Math.random() * card.length)]; $('#' + cardplace).append('<div class="card"><div class="title"></div><div class="atk"></div><div class="def"></div>'); $(".title").text(monster.name); $(".atk").text(monster.atk); $(".def").text(monster.def); cardplace = cardplace + 1; console.log(cardplace); }); });

 .card-place{ width: 200px; height: 275px; background-color: saddlebrown; margin: 20px; float: left; } .card{ width: 180px; height: 255px; background-color: brown; overflow: auto; padding: 10px; } .title{ width: 100%; height: 30px; background-color: burlywood; margin-bottom: 10px; } .atk{ background-color: burlywood; width: 40px; height: 40px; float: left; } .def{ background-color: burlywood; width: 40px; height: 40px; float: right; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <body> <button id="draw">draw</button> <div class="card-place" id="1"> </div> <div class="card-place" id="2"></div> <div class="card-place" id="3"></div> </body>

每次单击ID为#draw的按钮时，我想显示一个随机对象。 该对象出现，但是它总是替换变量Monster中的另一个对象。 所以我不能同时拥有不同的对象。 目前我有这个：

$(document).ready(function () {
var cardplace = 1;
var monster = [];
var card = [
    {
        name: "monster 1"
        , atk: "12"
        , def: "3"
    }
    , {
        name: "monster 2"
        , atk: "8"
        , def: "10"
    }
];
$("#draw").click(function drawcard() {
    monster[cardplace] = card[Math.floor(Math.random() * card.length)];
    $('#' + cardplace).append('<div class="card"><div class="title"></div><div class="atk"></div><div class="def"></div>');
    $(".title").text(monster[cardplace].name);
    $(".atk").text(monster[cardplace].atk);
    $(".def").text(monster[cardplace].def);
    cardplace = cardplace + 1;
    console.log(cardplace);
});
});

这是HTML

 <button id="draw">draw</button>
<div class="card-place" id="1">


</div>
<div class="card-place" id="2"></div>
<div class="card-place" id="3"></div>

Answer 1

您正在click处理程序中选择每个.title ， .atk和.def元素。 可以创建一个变量来表示当前的#1 ， #2或#3元素，则设定context的jQuery()调用到当前上下文。

 $(document).ready(function() { var cardplace = 1; var card = [{ name: "Lord salazar", atk: "12", def: "3", id: "1" }, { name: "Master manga", atk: "8", def: "10", id: "2" }]; $("#draw").click(function drawcard() { var monster = card[Math.floor(Math.random() * card.length)]; var place = $('#' + cardplace); place.append('<div class="card"><div class="title"></div><div class="atk"></div><div class="def"></div>'); // set `context` to `place` at each of `jQuery()` call below $(".title", place).text(monster.name); $(".atk", place).text(monster.atk); $(".def", place).text(monster.def); if (cardplace === $("[class|=card][id]").length) { cardplace = 1 } else { cardplace += 1; }; }); });

 .card-place { width: 200px; height: 275px; background-color: saddlebrown; margin: 20px; float: left; } .card { width: 180px; height: 255px; background-color: brown; overflow: auto; padding: 10px; } .title { width: 100%; height: 30px; background-color: burlywood; margin-bottom: 10px; } .atk { background-color: burlywood; width: 40px; height: 40px; float: left; } .def { background-color: burlywood; width: 40px; height: 40px; float: right; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <body> <button id="draw">draw</button> <div class="card-place" id="1"></div> <div class="card-place" id="2"></div> <div class="card-place" id="3"></div> </body>

从数组访问和显示对象

问题描述

1 个解决方案

解决方案1
0 2017-02-11 23:13:16

从数组访问和显示对象

问题描述

1 个解决方案

解决方案1 0 2017-02-11 23:13:16

解决方案1
0 2017-02-11 23:13:16