i wanted to get this logic =>
if you click on a cube for the first time, it turns black, if you clicked another time on the same cube, it turns white. if the cube is allready white, it becomes black
It should works on each cube individually... I'm getting lost. Thx for your advices.
var compteur = 0;
var hasBeenClick = false;
/*jslint browser: true*/
/*global $, jQuery, alert*/
$(document).ready(function () {
"use strict";
//Lorsque je clique
$(".cliquerAction").click(function () {
if (hasBeenClick === false) {
$(this).css("background-color", "black");
compteur = compteur + 1;
alert("Premier click" + " vous avez cliqué " + compteur + " fois");
hasBeenClick = true;
} else if (hasBeenClick === true) {
compteur = compteur + 1;
$(this).css("background-color", "white");
alert("Deuxieme click" + " vous avez cliqué " + compteur + " fois");
hasBeenClick = true;
}
if (compteur > 2) {
$(this).css("background-color", "black");
alert("Bcp click" + " vous avez cliqué " + compteur + " fois");
hasBeenClick = false;
compteur = 0;
}
});
});
*{
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
body {
background-color: darkblue;
max-width: 1980px;
max-height: 1080px;
}
#page {
border: white 5px solid;
width: auto;
height: 1000px;
margin: auto;
}
#bloc1 {
position:relative;
background-color: red;
width: 100px;
height: 100px;
}
#bloc2 {
background-color: yellow;
width: 100px;
height: 100px;
}
#bloc3 {
background-color: darkgreen;
width: 100px;
height: 100px;
}
#bloc4 {
background-color: blueviolet;
width: 100px;
height: 100px;
}
#container{
padding-left:10%;
padding-right:10%;
margin:auto;
border:pink thick solid;
display:flex;
justify-content:space-between;
width:auto;
height:auto;
min-height:500px;
min-width:500px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Page d'acceuil</title>
<script src="http://ift.tt/1oMJErh"></script>
<script src="../js/script.js"></script>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div id="page">
<div id="container">
<div id="bloc1" class="cliquerAction" ></div>
<div id="bloc2" class="cliquerAction"></div>
<div id="bloc3" class="cliquerAction"></div>
<div id="bloc4" class="cliquerAction"></div>
</div>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire