Question

/*
var young_link = {
    power: 30,
    cpower: 20,
    hp: 3,
    image: "../images/young_link.jpg",
};


var young_zelda = {
    power: 30,
    cpower: 20,
    hp: 3,
}


var impa = {
    power: 30,
    cpower: 20,
    hp: 3,
}


var hey = {
    power: 30,
    cpower: 20,
    hp: 3,
}

//$("#test").html(young_link);

console.log(young_link);*/


$(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 test = "<img src= '../images/young_link.jpg'>";

    //var young_hero = ["young_link","young_zelda","impa", "malon"];
    var young_hero = ["Link", "Bongo Bongo","Gandondorf","Queen Gohma"];
    var health = [100, 70, 120, 50];


    for (var i = 0; i < young_hero.length; i++) {
        var hero_btns = $("<buttons>");

        hero_btns.addClass("hero hero_button");

        hero_btns.attr({"data-name":young_hero[i],"data-health":health[i],"data-image":hero_image[i]});


        hero_btns.text(young_hero[i]);
        hero_btns.append(hero_image[i]);
        hero_btns.append(health[i]);

        $("#buttons").append(hero_btns);
    }   




$(".hero_button").on("click" , function() {

    var battle_ground = $("<div>");

    battle_ground.addClass("hero hero_button");

    battle_ground.text($(this).data("data-name"));

    $("#battle").append(battle_ground);

});

});

for循环正在工作，并在屏幕上附加按钮。但是在$（＆＃34; .hero_button＆＃34;）。on（＆＃34;点击＆＃34;，function（），它只是在页面上放一个空框，只需点击一下。所以，它没有采取附在按钮上的数据。

Answer 1

Sam正确回答了你的问题，理所当然地得到了公认的答案。但我想让你深入了解如何以更清洁的方式做到这一点，没有必须排队的大量阵列。也没有使用jQuery。下面你可以看到一个更面向对象的方法来做到这一点。

您可以在行动in this jsFiddle

中看到它

// Now we have an object which represents a hero. No need to duplicate loads of code.
function Hero(heroData) {
    this.name = heroData.name;
  this.health = heroData.health;

  this.setImage = function() {
    this.image = new Image();
    this.image.src = heroData.imageSrc;
    this.image.id = heroData.imageId;
  }

  this.createHeroButton = function() {
    this.createButtonElement();
    this.addButtonToPage();
    this.attachButtonEvents();
  }

  this.createButtonElement = function() {
    var heroButton = document.createElement('button');
    heroButton.classList.add('hero,hero_button');
    heroButton.setAttribute('name', this.name);
    heroButton.setAttribute('health', this.health);
    heroButton.appendChild(this.image);
    this.button = heroButton;
  }

  this.attachButtonEvents = function() {
    this.button.addEventListener('click', this.addButtonToPage.bind(this));
  }

  this.addButtonToPage = function() {
    var container = document.getElementById('container');
    container.appendChild(this.button);
  }

  this.takeDamage = function(damageValue) {
    this.health -= damageValue;
    this.button.setAttribute('health', this.health);
  }

  this.setImage();
}

// So here we create a Hero instance, in this case Link, we can use now describe links attributes, image, name, health...
var link = new Hero({
    name: 'Link',
  health: 100,
  imageSrc: 'http://orig12.deviantart.net/8bb7/f/2011/276/4/e/four_swords_link_avatar_by_the_missinglink-d4bq8qn.png',
  imageId: 'link-image'
});

var mario = new Hero({
    name: 'Mario',
  health: 100,
  imageSrc: 'http://rs568.pbsrc.com/albums/ss123/stvan000/thumb-super-mario-bros-8bit-Mario.jpg~c200',
  imageId: 'mario-image'
});

// Now we can easily make a button and add it to the page
link.createHeroButton();
mario.createHeroButton();

// Lets try decreasing the health on mario
mario.takeDamage(10);
// Because we have an object reference which handles all of our heros state we can decrease his health and update the buttons data without much trouble.

Answer 2

进行一些更改以获取数据集并正确读取：

制作button代码而不是buttons
使用.attr()代替.data()来获取属性

请参阅以下代码内联注释。

此外，不是为每个项目的Image对象添加属性（将添加类似data-image="[Object object]"的属性），而是添加一个与迭代器索引相对应的整数，并使用它来引用当您需要获取相应的图像时，hero_image数组。

此外，您可以使用Array.forEach()使用回调函数迭代英雄数组中的项目。这样您就不必担心更新迭代器变量（在这种情况下为i）并索引到数组中。你应该看一下这个有很好练习的functional programming guide。

$(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_heroes = ["Link", "Bongo Bongo", "Gandondorf", "Queen Gohma"];
  var health = [100, 70, 120, 50];
  young_heroes.forEach(function(young_hero,i) {
    var hero_btns = $("<button>");
    hero_btns.addClass("hero hero_button");
    hero_btns.attr({
      "data-name": young_hero,
      "data-health": health[i],
      //instead of adding an attribute for the image object, just add an index
      "data-index": i
    });


    hero_btns.text(young_hero);
    hero_btns.append(hero_image[i]);
    hero_btns.append(health[i]);

    $("#buttons").append(hero_btns);
  });

  $(".hero_button").on("click", function() {
    var battle_ground = $("<div>");
    battle_ground.addClass("hero hero_button");
    //use .attr() here instead of .data()
    battle_ground.text($(this).attr("data-name"));

    /** My additions  - 
     * I am not sure exactly how this should be done  
     * so adjust accordingly 
     **/
    //additionally, you can add attributes to the new battle_ground item
    battle_ground.attr('data-health',$(this).attr("data-health"));

    battle_ground.append(hero_image[$(this).attr("data-index")]);
    battle_ground.append($(this).attr("data-health"));
    /** End my additions **/

    $("#battle").append(battle_ground);
  });
});

#battle div {
  border: 1px solid #555;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttons"></div>
Battle ground:
<div id="battle"></div>

JavaScript，尝试让按钮移动点击

2 个答案: