Question

我正在制作一场RPG比赛。所以我试图创建一个for循环，这将生成我到目前为止的屏幕按钮，

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

问题在于它没有将图像放在按钮上。

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.

上使用此简单功能

在JavaScript中，显示数组中的图片？

3 个答案: