Memory game with tag div

Question

Memory game with tag div

Asked 7 years, 8 months ago

Viewed 381 times

-2

I would like only the current div to change. I would like to randomize the Ivs. How to precede?

$(document).ready(function() {

$('.cores').click(function() {
	$('#1').css("background","red");
});

$('.cores').click(function() {
	$('#2').css("background","red");
});

$('.cores').click(function() {
	$('#3').css("background","blue");
});

$('.cores').click(function() {
	$('#4').css("background","blue");
});

$('.cores').click(function() {
	$('#5').css("background","silver");
});

$('.cores').click(function() {
	$('#6').css("background","silver");
});

$('.cores').click(function() {
	$('#7').css("background","pink");
});

$('.cores').click(function() {
	$('#8').css("background","pink");
});

$('.cores').click(function() {
	$('#9').css("background","orange");
});

$('.cores').click(function() {
	$('#10').css("background","orange");
});

$('.cores').click(function() {
	$('#11').css("background","yellow");
});

$('.cores').click(function() {
	$('#12').css("background","yellow");
});

/*animacao*/
$('.cores').mouseenter(function() {
       $(this).animate({
           height: '+=10px'
       });
   });
   $('.cores').mouseleave(function() {
       $(this).animate({
           height: '-=10px'
       }); 
   });
});

body{
	background-color:#121213;
}

div{
	/*tamanho*/
	height: 100px;
	width: 100px;
	border: 2px;
	border-radius: 5px;
	background-color: #30aaaa;
	display: inline-block;
	margin:50px 20px 10px 40px;
}

div.principal{
	margin-left: 300px;
	border-radius: 5px;
	background-color: #306080;
	height: 500px;
	width: 700px;

}

div div:hover{
	background-color:#306aaa;
}

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
	<script src="js/script.js" type="text/javascript"></script>
</head>
<body>


<div class="principal">

<div id="1" class="cores"></div>
<div id="2" class="cores"></div>

<div id="3" class="cores"></div>
<div id="4" class="cores"></div>

<div id="5" class="cores"></div>
<div id="6" class="cores"></div>

<div id="7" class="cores"></div>
<div id="8" class="cores"></div>

<div id="9" class="cores"></div>
<div id="10" class="cores"></div>

<div id="11" class="cores"></div>
<div id="12" class="cores"></div>

</div>

</body>
</html>

It’s not very clear to me what you’re trying to do @Vinicius. When you click each div the colour of each element is changed..

– BrTkCa

2017/03/17 at 20:24
A big problem is that you posted a question like, "I have this layout, but I don’t know how to make it work, do it for me?" It was not a doubt, it was a request for technical support :P Set a main scope for the question, if there are more questions, create another question.... in my view this very wide

– MarceloBoni

2017/03/17 at 20:30
@marceloBoni, I believe that now the question has become clearer.

– Vinicius

2017/03/18 at 02:11

1 answer

Browser other questions tagged javascript jquery css html5

You are not signed in. Login or sign up in order to post.

by Jéf Bueno • **67,331** points · Answer 1 · 2017-03-17T20:23:40+00:00

The problem is that you are using the same selector for all click events. Explaining better: all elements have the class cores, then by clicking on a specific element all events will be fired.

One of the possible solutions is to change all selectors by the id of the element that will trigger the click, example

$('#9').click(function() {
    $('#9').css("background","orange");
});

Note that in this example the selector #9, that is, the element with an id equal to 9.

However, I think it would be much easier to have only one code for this and leave the color saved in an element data-* in HTML itself.

I took advantage and made a small logic to distribute the colors by the "houses".

var allColors = [ { cod: 'red', disponivel: 2 },
                  { cod: 'blue', disponivel: 2 },
                  { cod: 'silver', disponivel: 2 },
                  { cod: 'pink', disponivel: 2 },
                  { cod: 'yellow', disponivel: 2 },
                  { cod: 'orange', disponivel: 2 }]

$(document).ready(function(){
  var mainDiv = $('.principal')[0];  
    
  for(var i = 0; i < 12; i++){
    var color = getRandomColor();
    
    var htmlCasa = $('#template').html();
    htmlCasa = htmlCasa.replace('COR', color);
    mainDiv.insertAdjacentHTML('beforeend', htmlCasa);
  } 
    
  $('.cores').click(function() {
    $(this).css("background", $(this).data('cor'));
  });
});

function getRandomColor() {
  var item = allColors[Math.floor(Math.random() * allColors.length)];  
  item.disponivel -= 1;  
  
  //console.log(item);
  
  if(item.disponivel === 0){
    var index = allColors.indexOf(item);
    allColors.splice(index, 1);
  }
  
  return item.cod; 
}

body{
    background-color: #121213;
}

div {
    height: 50px;
    width: 50px;
    background-color: #30aaaa;
    display: inline-block;
    margin: 25px 10px 5px 20px;
}

div.principal {
    margin-left: 30px;
    border-radius: 5px;
    background-color: #306080;
    height: 270px;
    width: 350px;
}

div div:hover {
    background-color: #306aaa;
}

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

<script type="text/template" id="template">
	    <div class="cores" data-cor="COR"></div>
</script>

<div class="principal">
</div>