我想在特定条件下更改状态答案

【问题标题】：I want to change a state on a specific condition我想在特定条件下更改状态
【发布时间】：2016-06-22 20:25:27
【问题描述】：

我想得到这个逻辑 =>

如果你第一次点击一个立方体，变黑了，如果您在同一个立方体上再次单击，它会变成白色。如果立方体已经是白色的，它就会变成黑色

它应该单独适用于每个立方体......我迷路了。谢谢你的建议。

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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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>

【问题讨论】：

标签： javascript jquery if-statement switch-statement

【解决方案1】：

我认为对于黑色和白色的背景颜色，使用 css 类更简单易行。创建两个类并使用 addClass 和 removeClass 作为条件状态更改

CSS

.click-even {
    background: white !important;
}
.click-odd {
    background: black !important;
}

$(document).ready(function () {
    "use strict";
    //Lorsque je clique
    $(".cliquerAction").click(function () {
        if($(this).hasClass("click-odd")){
            $(this).addClass("click-even");
            $(this).removeClass("click-odd");
        }
        else{
             $(this).addClass("click-odd");
            $(this).removeClass("click-even");
        }
    });
});

【讨论】：

【解决方案2】：

为了避免不必要的混淆，我将提出一个替代方案。您可以尝试根据当前颜色和您描述的所需逻辑仅关注 3 个简单规则，而不是检查是否已单击某些内容来确定下一个颜色：： p>

如果第一次点击立方体（例如如果它不是黑色或白色），则将其更改为黑色。
如果单击黑色立方体 - 它会变成白色。
如果单击白色立方体 - 它会变成黑色。

【讨论】：

你的逻辑更...逻辑，我会这样做，谢谢回答。

【解决方案3】：

我终于得到了我想要的东西：（我相信我可以用一个开关盒改进它，但它在 atm 工作）。希望这可以在某天对某人有所帮助。

/*jslint browser: true*/
/*global $, jQuery, alert*/


$(document).ready(function () {
	"use strict";
	//Lorsque je clique



	$(".cliquerAction").click(function () {

		var color = $(this).css('background-color');
		alert(color);
		
        //first time applying a color turn it black
		if (color !== "rgb(255, 255, 255)" || "rgb(0, 0, 0)") {
			$(this).css('background-color', 'black');
		}

        // if it s black and i click on the element : it turns white
		if (color === "rgb(0, 0, 0)") {
			$(this).css('background-color', 'white');
		}
        
        // if it s white and i click on the element : it turns black
		if (color === "rgb(255, 255, 255)") {
			$(this).css('background-color', 'black');
		}

	});
});

*{
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}

.black{
    background-color: black;
}

.white{
    background-color: white;
}

.active {
    background-color:#aaa;
}

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;
    cursor: pointer;
}
#bloc2 {
    background-color: yellow;
    width: 100px;
    height: 100px;
    cursor: pointer;
}
#bloc3 {
    background-color: darkgreen;
    width: 100px;
    height: 100px;
    cursor: pointer;
}
#bloc4 {
    background-color: blueviolet;
    width: 100px;
    height: 100px;
    cursor: pointer;
}

#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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
	<meta charset="utf-8">
	<title>Page d'acceuil</title>

	<script src="../jquery/jquery-3.0.0.js"></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" class="black" class="white"></div>
			<div id="bloc2" class="cliquerAction" class="black" class="white"></div>
			<div id="bloc3" class="cliquerAction" class="black" class="white"></div>
			<div id="bloc4" class="cliquerAction" class="black" class="white"></div>
		</div>

	</div>

</body>

【讨论】：