在JavaScript中，顯示數組中的圖片？

我正在製作一款RPG遊戲。所以我想做一個for循環，將產生按鈕在屏幕這是我到目前爲止，在JavaScript中，顯示數組中的圖片？

$(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); 
    } 
});

的問題是，它不是在圖片上的按鈕。

來源

2016-10-20 Justin Besteman

' $（「」）;'不是有效的選擇器。如果您想要選擇所有'

創建一個類或映射英雄名稱到圖像路徑。並行陣列是不好的做法。 –

創建按鈕 – Mobius

爲了添加一個圖像到你的按鈕，你將不得不做的不僅僅是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>

來源

2016-10-20 18:03:06 Mobius

你是對的，我讀得太快了。上面的例子正確使用它。 – Mobius

不知道你的確切要求。似乎你正試圖在另一個按鈕內創建一個按鈕。

如果你想添加圖像使用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); 
    } 
});

來源

2016-10-20 18:04:34 brk

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

來源

2016-10-20 18:15:06 BurakBaskak

在JavaScript中，顯示數組中的圖片？

回答

相關問題