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的按钮时，我想显示一个随机对象。该对象出现，但它总是替换变量怪物中的另一个对象。所以我不能同时拥有不同的对象。目前我有这个：

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

您正在.title处理程序中选择每个.atk，.def和click元素。您可以创建一个变量来表示当前的#1，#2或#3元素，然后将context的{{1}}调用设置为当前上下文。

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;
}

访问和显示数组中的对象

1 个答案: