Помогите с выводом блоков
Помогите разобраться, вообщем есть такой код:
В HTML 1 блок #idDiv Скрипт:
$(document).ready(function(){
function Boxs(width,height,bgColor){
this.width = width;
this.height = height;
this.bgColor = bgColor;
}
var box = new Boxs(250,250,'green');
var box2 = new Boxs(200,200,'yellow');
//Создание коробки
Boxs.prototype.createBox = function(){
$('#idDiv').append('
');
$('.clBox').css({'width' : this.width+'px', 'height' : this.height+'px', 'background-color' : this.bgColor, 'margin' : '80px'});
}
box.createBox();
box2.createBox();
});
Когда я вызываю метод "createBox()" оно создает блок с заданными параметрами в объекте "box", но если я после этого вызову тот же метод но уже для другого объекта который имеет другие параметры, то "this" будет брать параметры из "box2", и сделает 2 блока со свойствам "box2". Как сделать так что бы у меня вышли 2 блока с разными параметрами. Насколько я понял "this" берется из последнего вызова метода, как можно это исправить? Просьба помочь. |
Цитата:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
function Boxs(width,height,bgColor){
this.width = width;
this.height = height;
this.bgColor = bgColor;
}
var box = new Boxs(250,250,'green');
var box2 = new Boxs(200,200,'yellow');
//Создание коробки
Boxs.prototype.createBox = function(){
$('#idDiv').append(
$('<div/>').css({'width' : this.width+'px', 'height' : this.height+'px', 'background-color' : this.bgColor, 'margin' : '80px'})
);
}
box.createBox();
box2.createBox();
});
</script>
</head>
<body>
<div id="idDiv" ></div>
</body>
</html>
|
В этой строчке была проблема, я понял... я обновлял при втором вызове css (.clBox)...
==
Boxs.prototype.createBox = function(width,height,bgColor){
$('#idDiv').append('<div class="clBox"></div>');
$('.clBox').css({'width' : this.width+'px', 'height' : this.height+'px', 'background-color' : this.bgColor, 'margin' : '80px'});
}
== Спасибо за помощь) |
hfts_rider,
ваш вариант ))) чуть дополненный
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
function Boxs(width,height,bgColor){
this.width = width;
this.height = height;
this.bgColor = bgColor;
}
var box = new Boxs(250,250,'green');
var box2 = new Boxs(200,200,'yellow');
//Создание коробки
Boxs.prototype.createBox = function(width,height,bgColor){
$('#idDiv').append('<div class="clBox"></div>');
$('.clBox:last').css({'width' : this.width+'px', 'height' : this.height+'px', 'background-color' : this.bgColor, 'margin' : '80px'});
}
box.createBox();
box2.createBox();
});
</script>
</head>
<body>
<div id="idDiv" ></div>
</body>
</html>
|
Да! Спасибо! То что мне и нужно было "$('.clBox:last')"
|
Еще одно))) Подскажите как сделать теперь rotate(transform) для каждого элемента, что бы был универсальный метод, вот у меня крутит все блоки у которых класс определенный, а как можно переделать что бы при вызове метода "rotateBox()" для каждого блока он делал rotate отдельно?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
function Boxs(width,height,bgColor){
this.width = width;
this.height = height;
this.bgColor = bgColor;
}
var box = new Boxs(250,250,'green');
var box2 = new Boxs(200,200,'yellow');
//Создание коробки
Boxs.prototype.createBox = function(width,height,bgColor){
$('#idDiv').append('<div class="clBox"></div>');
$('.clBox:last').css({'width' : this.width+'px', 'height' : this.height+'px', 'background-color' : this.bgColor, 'margin' : '80px'});
}
box.createBox();
box2.createBox();
var i = 0;
var timer;
//Поворот коробки
Boxs.prototype.rotateBox = function(){
$('.startInterval').click(function(){
if(!timer){
timer = setInterval(function(){
$('.clBox').css({'transform' : 'rotate('+ i++ +'deg)'});
if(i === 180){
i = 0;
}
},30);
}
});
};
$('.stopInterval').click(function(){
clearInterval(timer);
timer = null;
});
box2.rotateBox();
});
</script>
</head>
<body>
<div id="idDiv"></div>
<div class="startInterval">[START]</div>
<div class="stopInterval">[STOP]</div>
</body>
</html>
|
hfts_rider, жми кнопку
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.clBox{
-webkit-transition: all 3s ease-in-out;
-moz-transition: all 3s ease-in-out;
-o-transition: all 3s ease-in-out;
-ms-transition: all 3s ease-in-out;
transition: all 3s ease-in-out;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
function Boxs(width,height,bgColor){
this.width = width;
this.height = height;
this.bgColor = bgColor;
}
var box = new Boxs(250,250,'green');
var box2 = new Boxs(200,200,'yellow');
//Создание коробки
Boxs.prototype.createBox = function(width,height,bgColor){
$('#idDiv').append('<div class="clBox"></div>');
$('.clBox:last').css({'width' : this.width+'px', 'height' : this.height+'px', 'background-color' : this.bgColor, 'margin' : '80px'});
this.el = $('.clBox:last')
}
box.createBox();
box2.createBox();
var i = 0;
var timer;
//Поворот коробки
Boxs.prototype.rotateBox = function(i){
this.el.css({'transform' : 'rotate('+ i +'deg)'});
};
box2.rotateBox(45);
$('.startInterval').click(function(){
box.rotateBox(25);
});
});
</script>
</head>
<body>
<div id="idDiv"></div>
<div class="startInterval">[START]</div>
<div class="stopInterval">[STOP]</div>
</body>
</html>
|
Спасибо! "this.el", то что нужно!
|
| Часовой пояс GMT +3, время: 17:20. |