g11s2/myowncopy
Template
1
0
Fork 0
forked from technolyceum/g11-m2
Code Pull Requests Activity

added dom

Browse Source
This commit is contained in:
root
2025-11-20 17:25:11 +03:00
parent 50443223cd
commit 864bbef52d
353 changed files with 7926 additions and 2542 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/if_statements/css/style.css Executable file
View File

@@ -0,0 +1,17 @@
.container {
display: flex;
flex-flow: row wrap;
box-sizing:border-box;
margin-right:auto;
margin-left:auto;
max-width:1050px;
}
.box {
flex:1;
display: flex; /* make the contents controllable by flexbox*/
flex-flow:column;
min-width: 240px;
margin: 10px;
padding: 20px;
background-color: #000;
}

36
FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/if_statements/index.html Executable file
View File

@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="container">
<div class="box one">
</div>
<div class="box three">
</div>
<div class="box one">
</div>
<div class="box two">
</div>
<div class="box one">
</div>
<div class="box two">
</div>
<div class="box three">
</div>
<div class="box three">
</div>
<div class="box two">
</div>
</div>
</body>
</html>

22
FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/if_statements/js/script.js Executable file
View File

@@ -0,0 +1,22 @@
$(document).ready(function() {
$(".box").on("click", function() {
/**
* When we click on an element that has
* a 'box' class, this event will be fired.
*/
var classNames = $(this).attr("class").split(" ");
var boxClass = classNames[0];
var className = classNames[1];
if ($(this).css("background-color") == "rgb(255, 0, 0)") {
// If this object is already red, turn it black
$("." + className).css("background-color", "#000");
} else {
// Else turn all elements with a box class black
// and then change the color of all elements
// with the same class name as the clicked element
// to red.
$("." + boxClass).css("background-color", "#000");
$("." + className).css("background-color", "red");
}
});
})