Memory game with div tag [closed]

Question

Memory game with div tag [closed]

Navigation

#1 by (9 votes)

-2

I would like only the current div to change. I would like to randomize the divs. How to preface?

$(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><linkrel="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>

javascript jquery html5 css

asked by anonymous 17.03.2017 / 21:04

1 answer

Hibernate with Java 9 How to return all the fields of a "Mysql" line with the "id" of the line? [closed]

score 9 · Accepted Answer

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

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

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

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

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

I took advantage of it and made a small logic to distribute the colors through 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><scripttype="text/template" id="template">
	    <div class="cores" data-cor="COR"></div>
</script>

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