JavaScriptは、ループが働いて、画面上のボタンを追加しているため、ボタンがクリック

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

}); 

}); 

---

ザ・上を移動するために取得しようとしています。しかし、$（ "。hero_button"）。on（ "click"、function（）では、クリックして空のボックスをページに置くだけなので、ボタンに添付されているデータは取り込まれません）

Answer 1

設定データを取得し、正しく読むための変更のカップル：

1. がbuttonタグの代わりに、buttons

にインラインコメントを参照してください属性を取得するために使用.attr()代わり.data()のを作りますコード以下。

また、代わりに（data-image="[Object object]"のような属性を追加します）各項目のImageオブジェクトの属性を追加するだけでイテレータのインデックスに対応する整数を追加し、あなたが取得する必要があるとき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>

Answer 2

サムが正しくあなたの質問に答えて当然受け入れ答えに値します。しかし、私は、整列しなければならない多くの配列を使わずに、よりクリーンな方法でこれをどうやって行うことができるかについての洞察を与えたいと思っていました。また、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.