Question

我想得到这个逻辑=＆gt;

如果您是第一次点击多维数据集，它变黑了，如果你在同一个立方体上再次点击它，它会变成白色。如果立方体已经是白色，则变为黑色

它应该分别适用于每个立方体......我迷路了。感谢您的建议。

＆＃13;

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

＆＃13;

*{
    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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

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

CSS

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

JS

$(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");
        }
    });
});

Answer 2

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

如果首次点击了一个多维数据集（例如如果它不是黑色或白色），则将其更改为黑色。
如果点击黑色立方体 - 它会变白。
如果单击一个白色立方体 - 它会变黑。

Answer 3

我终于得到了我正在寻找的东西:(我相信我可以通过一个开关盒改进它，但它正在工作atm）。希望这可以在某一天帮助某人。

＆＃13;

/*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');
		}

	});
});

＆＃13;

*{
    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;
}

＆＃13;

<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>

＆＃13;

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

3 个答案: