Assigning a numeric value to a html class using jquery

Navigation
0

I'm trying to make a memory game and for this I need to assign values to the div where they will be stored to compare if the selected figures are the same. I tried it that way (as per code below) but it is not working. Could someone point me the error or give some hint of what I can do to work?

JavaScript code 

//Função para adicionar a imagem ao clicar
$('.peca').bind('click', function(){
	$(this).html('<img src="images/img1.jpg" border="0" height="100px"/>'); //Foi usado o parâmetro "this" para que ao clicar emm um objeto, somente este seja alterado
});

var p1 = $('.p1').attr('valor', 'numero[0]');
var p2 = $('.p2').attr('valor', 'numero[1]');
var p3 = $('.p3').attr('valor', 'numero[2]');
var p4 = $('.p4').attr('valor', 'numero[3]');
var p5 = $('.p5').attr('valor', 'numero[4]');
var p6 = $('.p6').attr('valor', 'numero[5]');
var p7 = $('.p7').attr('valor', 'numero[6]');
var p8 = $('.p8').attr('valor', 'numero[7]');
var p9 = $('.p9').attr('valor', 'numero[8]');
var p10 = $('.p10').attr('valor', 'numero[9]');
var p11 = $('.p11').attr('valor', 'numero[10]');
var p12 = $('.p12').attr('valor', 'numero[11]');
var p13 = $('.p13').attr('valor', 'numero[12]');
var p14 = $('.p14').attr('valor', 'numero[13]');
var p15 = $('.p15').attr('valor', 'numero[14]');
var p16 = $('.p16').attr('valor', 'numero[15]');

var numero = [16];

function numero_aleatorio () {
	var numero = [16];
	for(i=0;i<16;i++) {
		
		var ale = Math.floor(Math.random()*8+1); //Fuunção para gerar valores aleatórios de 1 a 8

		numero [i]=ale;

	}

}
<!DOCTYPE html>
<html>
	<head>
		<title>Jogo da Memória</title>
		<meta charset="utf-8">

		<style type="text/css">
			.peca{
				width: 100px;
				height: 100px;
				border: 2px solid #000;
				background-color: blue;
				float: left;
				margin-left: 5px;
				margin-top: 5px;
			}
			.peca:hover{
				background-color: #FFF;
				cursor: pointer;
			}
		</style>
	</head>

	<body>
		
		<div class="tabuleiro">
			<div class="peca p1" valor=""></div> <!--Atribuindo uma class "valor" para fins de manipulação com javascript-->
			<div class="peca p2" valor=""></div>
			<div class="peca p3" valor=""></div>
			<div class="peca p4" valor=""></div>
			<div style="clear: both;"></div> <!--"Pular linha"-->
			<div class="peca p5" valor=""></div>
			<div class="peca p6" valor=""></div>
			<div class="peca p7" valor=""></div>
			<div class="peca p8" valor=""></div>
			<div style="clear: both;"></div>
			<div class="peca p9" valor=""></div>
			<div class="peca p10" valor=""></div>
			<div class="peca p11" valor=""></div>
			<div class="peca p12" valor=""></div>
			<div style="clear: both;"></div>
			<div class="peca p13" valor=""></div>
			<div class="peca p14" valor=""></div>
			<div class="peca p15" valor=""></div>
			<div class="peca p16" valor=""></div>
		</div>

		<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="script.js"></script>
	</body>
</html>
    
asked by anonymous 21.06.2017 / 01:20

1 answer

0

Diego Soares, I solved your problem.
First of all I would like to point out some things, you were adding an attribute in the div's called valor , this attribute does not exist and this is not a good practice. Use data-value, otherwise this had some javascript syntax problems:

1- you were assigning var p1 = $('.p1').attr('valor', 'numero[0]'); value to a variable p1 , and was assigning the value in single quotes, no need . 2- You did not have to limit your array to 16 as you had done, just give array.push(valor) . There were other errors that are not so important to point out and I forgot, below the code working. 

//Função para adicionar a imagem ao clicar
$('.peca').bind('click', function(){
	$(this).html('<img src="images/img1.jpg" border="0" height="100px"/>'); //Foi usado o parâmetro "this" para que ao clicar emm um objeto, somente este seja alterado
});

var numero = [];

function numero_aleatorio () {
	for(i=0;i<16;i++) {
		numero.push(Math.floor((Math.random() * 8) + 1));
	}
};

numero_aleatorio();

$('.p1').attr('data-value', numero[0]);
$('.p2').attr('data-value', numero[1]);
$('.p3').attr('data-value', numero[2]);
$('.p4').attr('data-value', numero[3]);
$('.p5').attr('data-value', numero[4]);
$('.p6').attr('data-value', numero[5]);
$('.p7').attr('data-value', numero[6]);
$('.p8').attr('data-value', numero[7]);
$('.p9').attr('data-value', numero[8]);
$('.p10').attr('data-value', numero[9]);
$('.p11').attr('data-value', numero[10]);
$('.p12').attr('data-value', numero[11]);
$('.p13').attr('data-value', numero[12]);
$('.p14').attr('data-value', numero[13]);
$('.p15').attr('data-value', numero[14]);
$('.p16').attr('data-value', numero[15]);
<html>
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><styletype="text/css">
			.peca{
				width: 100px;
				height: 100px;
				border: 2px solid #000;
				background-color: blue;
				float: left;
				margin-left: 5px;
				margin-top: 5px;
			}
			.peca:hover{
				background-color: #FFF;
				cursor: pointer;
			}
		</style>
  </head>

	<body>
		
		<div class="tabuleiro">
			<div class="peca p1" data-value=""></div> <!--Atribuindo uma class "valor" para fins de manipulação com javascript-->
			<div class="peca p2" data-value=""></div>
			<div class="peca p3" data-value=""></div>
			<div class="peca p4" data-value=""></div>
			<div style="clear: both;"></div> <!--"Pular linha"-->
			<div class="peca p5" data-value=""></div>
			<div class="peca p6" data-value=""></div>
			<div class="peca p7" data-value=""></div>
			<div class="peca p8" data-value=""></div>
			<div style="clear: both;"></div>
			<div class="peca p9" data-value=""></div>
			<div class="peca p10" valor=""></div>
			<div class="peca p11" data-value=""></div>
			<div class="peca p12" data-value=""></div>
			<div style="clear: both;"></div>
			<div class="peca p13" data-value=""></div>
			<div class="peca p14" data-value=""></div>
			<div class="peca p15" data-value=""></div>
			<div class="peca p16" data-value=""></div>
		</div>

		<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="script.js"></script>
	</body>
  </html>
    
21.06.2017 / 01:49
Laravel - plugin to view existing files and folders in Storage-app-public FieldSet in JavaFX