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>