JavaScriptで、配列から写真を表示していますか？

Question

私はRPGゲームを作っています。だから私は、この私がこれまで持っているもの、

$(document).ready(function() { 
    var imgArray = new Array(); 
    imgArray[0] = new Image(); 
    imgArray[0].src = 'assets/images/young_link.jpg'; 

    //var test = "<img src= '../images/young_link.jpg'>"; 
    //var young_hero = ["young_link","young_zelda","impa", "malon"]; 
    var young_hero = ["young_link"]; 
    //var hero_images = [test]; 

    for (var i = 0; i < young_hero.length; i++) { 
     var hero_btns = $("<buttons>"); 
     hero_btns.addClass("hero"); 
     hero_btns.attr("data-hero" , young_hero[i]); 
     hero_btns.attr("data-image" , imgArray[i]); 
     hero_btns.text(imgArray[i]); 
     hero_btns.text(young_hero[i]); 
     $("#buttons").append(hero_btns); 
    } 
}); 

問題は、それがボタンの上に画像を入れていないことである画面にボタンを生成しますforループを作るしようとしています。

Answer 1

ボタンに画像を追加するには、data-image以上を実行する必要があります。<img>タグを実際に作成し、画像のソースを与える必要があります。それから、あなたのボタンに画像を正しく並べるために、CSSを使う必要があります。

画像を最初のボタンに追加するようにコードを更新しました。あなたの正確な要件わからない

$(document).ready(function() { 
 
    var imgArray = new Array(); 
 
    imgArray[0] = new Image(); 
 
    imgArray[0].src = 'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT7o2tCpqvs_XRpvtHbuRe9KwkzydiVhWLJ6YVTkQcpkev09w0MBCgNu2w'; 
 

 
    //var test = "<img src= '../images/young_link.jpg'>"; 
 
    var young_hero = ["young_link","young_zelda","impa", "malon"]; 
 
    //var young_hero = ["young_link"]; 
 
    //var hero_images = [test]; 
 

 
    for (var i = 0; i < young_hero.length; i++) { 
 
     var hero_btns = $("<button>"); // changed from <buttons> 
 
     hero_btns.addClass("hero"); 
 
     hero_btns.attr("data-hero" , young_hero[i]); 
 
     //hero_btns.text(imgArray[i]); 
 
     hero_btns.text(young_hero[i]); 
 
     hero_btns.append(imgArray[i]) 
 
     $("#buttons").append(hero_btns); 
 
    } 
 
});

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

Answer 2

。別のボタンの中にボタンを作成しようとしているようです。

あなたは画像が

がテストされていないimgタグとそのsrc属性を使用していますが、これは

$(document).ready(function() { 
    var imgArray = new Array(); 
    imgArray[0] = new Image(); 
    imgArray[0].src = 'assets/images/young_link.jpg'; 
    var young_hero = ["young_link"]; 
    for (var i = 0; i < young_hero.length; i++) { 
    var hero_btns = $("<img>"); 
     hero_btns.addClass("hero"); 
     hero_btns.attr("data-hero", young_hero[i]); 
    hero_btns.attr("src", imgArray[i]); 
     hero_btns.text(imgArray[i]); 
    hero_btns.text(young_hero[i]); 

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

Answer 3

$(function(){ 
var heroList = { 
{heroName: "young_link", imagePath: "assets/images/young_link.jpg"}, 
{heroName: "young_zelda", imagePath: "assets/images/young_zelda.jpg"}, 
{heroName: "impa", imagePath: "assets/images/impa.jpg"}, 
{heroName: "young_link1", imagePath: "assets/images/young_link1.jpg"}]; 

for (var i = 0; i < heroList.length; i++) { 
     var hero_btns = $('<img class="hero">'); 

     hero_btns.attr({ 
     "data-index": i, 
     "src": heroList[i].imagePath, 
     "data-name": heroList[i].heroName, 
     "title": heroList[i].heroName 
     }); 
     $("#buttons").append(hero_btns); 
    } 

}) 

あなたは上のこの単純なを使用することができます試すことができます追加したい場合はjsfiddle example.