|
Сообщение от Sevic
|
|
если делать через цикл,
|
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style>
#ppp{
display: flex;
}
.square {
width:100px;
height:100px;
background-color:yellow;
margin-right: 25px;
transition: 1s;
}
.square-new {
width:150px;
height:150px;
background-color:red;
margin-right: 25px;
}
</style>
<body>
<div id="ppp">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<script>
var fn = new changeClass({
el: ".square",
cls: "square-new"
});
function changeClass(el) {
var self = this;
self.el = document.querySelectorAll(el.el);
self.Prev = document.querySelector(el.el);
changeClass.prototype.select = function(elem) {
this.deselect();
this.Prev = elem;
this.Prev.classList.add(el.cls)
};
changeClass.prototype.deselect = function() {
this.Prev.classList.remove(el.cls)
};
changeClass.prototype.selectNum = function(num) {
this.select(this.el[num])
};
[].forEach.call(self.el, function(node) {
node.addEventListener("click", self.select.bind(self, node))
});
return self
}
window.setTimeout(function() {
fn.selectNum(2)
}, 1000);
window.setTimeout(function() {
fn.deselect()
}, 3000);
</script>
</body>
</html>