Question

我的问题如下，我如何将数组内的图像传递给div？

我将div＃imagem相乘，我需要将数组图像传递给它。

但我不知道怎么......有人可以帮助我吗？！

我的JavaScript / JQuery

var divBoard = $("<div id='board'></div>");
$("body").after(divBoard);
var titleGame = $("<h1></h1>").text("Memory Game");
var btnReset = $("<input id='btn-reset' type='button' onclick='reset()' value='Reset'>");
$("#board").append(titleGame);
$("#board").append(btnReset);

(function (){
var images = ['img/facebook.png','img/android.png','img/chrome.png','img/firefox.png','img/html5.png','img/googleplus.png','img/twitter.png','img/windows.png','img/cross.png'];

  $(window).load(function () {

        $('#board').html('');

        var numCards = 16;

        for (var i = 1; i <= numCards; i++) {

            $("#board").append("<div class='image" + i + " images'></div>") &&
            $(".image" + i).clone().appendTo("#board");

        }
            var cards = $(".images");

        for (var i = 0; i < cards.length; i++) {
            var target = Math.floor(Math.random() * cards.length - 1) + 1;
            var target2 = Math.floor(Math.random() * cards.length - 1) + 1;
            var target3 = Math.floor(Math.random() * cards.length - 1) + 1;
        }
})();


app.start();
});

我的HTML

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title>JavaScript Memory Game</title>
</head>
<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script charset="utf8">
  var app = { nrComponents:0 };
  app.getComponent = function(name) {
    if (!app[name]) {
      app[name] = {};
      app[app.nrComponents++] = name;
    }
    return app[name];
  };
</script>
<script src="script.js" charset="utf8"></script>
</body>
</html>

Answer 1

以下是我列出的两个关键问题。您的代码中的某些行似乎不是必要的，也很难为它调试。我建议简化你的代码以便更好地调试。希望它能帮助..

$（ “正文”）后（divTabuleiro）。我认为这会在'body'之后插入内容，而不是在'body'中放入'divTabuleiro'。
$（ “＃塔布莱鲁”）附加（ “”）;内部应该有插入图像的标签。

// Create a start function and move you initial code here....
app.start = function(){
  var imagens = [
    'https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg',
    'http://www.pressunion.org/wp-content/uploads/2016/11/1-2.jpg',
    'http://www.feixiubook.com/wp-content/uploads/2016/06/01-25.jpg'
  ];
  
  var divTabuleiro = $("<div id='tabuleiro'></div>");
  $("body").append(divTabuleiro);
  var titulo = $("<h1></h1>").text("Jogo da Memória");
  var btnReset = $("<input id='btn-reset' type='button' onclick='reset()' value='Reset'>");
  $("#tabuleiro").append(titulo);
  $("#tabuleiro").append(btnReset);

  $('#tabuleiro').html('');

  var numCards = 3;

  for (var i = 0; i < numCards; i++) {

    var img = imagens[i];
    $("#tabuleiro").append("<div class='my-image-" + i + " my-image'><img src='" + img + "'></div>") && $(".my-image-" + i).clone().appendTo("#tabuleiro");
  }

  // randomize cards in stack
  var cards = $(".my-image");
  for (var i = 0; i < cards.length; i++) {
    var target = Math.floor(Math.random() * cards.length - 1) + 1;
    var target2 = Math.floor(Math.random() * cards.length - 1) + 1;
    var target3 = Math.floor(Math.random() * cards.length - 1) + 1;
    cards.eq(target).before(cards.eq(target2)).before(cards.eq(target3));
  }
};

// Maybe create another function
app.reset = function(){

};


$(window).ready(function() {
  // Because you have created a start function above. you can call it when document ready
  app.start();
});

.my-image {
  width: 200px;
  height: 200px;
  overflow: hidden;
  float: left;
}

.my-image img {
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
// Create a namespace of app
var app = { nrComponents:0 };
// Add a function 'getComponent' in to it
app.getComponent = function(name) {
  if (!app[name]) {
    app[name] = {};
    app[app.nrComponents++] = name;
  }
  return app[name];
};
// So There is no start() function inside......
// we can add start function later..
</script>

Answer 2

嗯..我不明白你的确切要求，但是根据数组制作图像你可以用它作为指南：

var imagens = ['img/facebook.png','img/android.png','img/chrome.png','img/firefox.png','img/html5.png','img/googleplus.png','img/twitter.png','img/windows.png','img/cross.png'];

$.each(imagens,function(index,imageSrc){
      $("Parent Element").append('<img src="'+imageSrc+'" />');
});

希望它有所帮助。

JQuery图片记忆游戏

2 个答案: