1

Preciso adicionar uma imagem diferente em uma div. Para isso usei um for para fazer esse loop. Tem alguma manipulação que eu possa fazer na tag img que eu estou adicionando para que a cada loop seja alterado o nome da imagem?

for (i = 0; i <= 16; i++) {

  $('#p' + i).bind('click', function() {
    $(this).html('<img src="images/img1.jpg" border="0";" height="100px"/>');
  });
}
.peca {
  width: 100px;
  height: 100px;
  background-color: #778899;
  float: left;
  margin-left: 5px;
  margin-top: 5px;
  border-radius: 10px;
}

.peca:hover {
  box-shadow: 0 0 5px #000000;
  cursor: pointer;
}
<!DOCTYPE html>
<html>

<head>
  <title>Jogo da Memória</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <!--Chamando arquivo css externo-->
</head>

<body>

  <div class="tabuleiro">
    <div class="peca" id="p1"></div>
    <div class="peca" id="p2"></div>
    <div class="peca" id="p3"></div>
    <div class="peca" id="p4"></div>
    <div style="clear: both;"></div>
    <!--"Pular linha"-->
    <div class="peca" id="p5"></div>
    <div class="peca" id="p6"></div>
    <div class="peca" id="p7"></div>
    <div class="peca" id="p8"></div>
    <div style="clear: both;"></div>
    <div class="peca" id="p9"></div>
    <div class="peca" id="p10"></div>
    <div class="peca" id="p11"></div>
    <div class="peca" id="p12"></div>
    <div style="clear: both;"></div>
    <div class="peca" id="p13"></div>
    <div class="peca" id="p14"></div>
    <div class="peca" id="p15"></div>
    <div class="peca" id="p16"></div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>

  <script type="text/javascript" src="script.js"></script>
</body>

</html>

1 Resposta 1

0

No caso dos nomes das imagens serem iguais, só mudando o numero basta concatenar. Tens de passar o i para uma nova clausura para ficar na memória e não se perder no momento que for usado (mais sobre isso aqui).

function prepararHTML(nr) {
  return '<img src="images/img' + nr + '.jpg" border="0";" height="100px"/>';
}

for (var i = 0; i <= 16; i++) {
  $('#p' + i).bind('click', function() {
    $(this).html(prepararHTML(i + 1));
  });
}

Se forem nomes diferentes, podes criar uma array com nomes de imagens e depois iterar sobre essa array:

var imagens = ['foo.jpg', 'bar.jpg'];
function prepararHTML(nr) {
  return '<img src="images/img' + nr + '.jpg" border="0";" height="100px"/>';
}

for (var i = 0; i <= imagens.length; i++) {
  $('#p' + i).bind('click', function() {
    $(this).html(prepararHTML(imagens[i]));
  });
}

Nota:

Não te esqueças de declarar i. Deve ser for (var i = 0;...

1
  • Valeu mesmo Sergio! Na verdade eu tinha tentado esse método de concatenar, mas estava dando certo porque eu coloca o sinal de '+' antes da variável somente. Mas eu corrigi aqui e deu certo. Valeu :) 22/06/2017 às 0:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .