Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   ООП через функцию (https://javascript.ru/forum/misc/68987-oop-cherez-funkciyu.html)

Gorge 22.05.2017 16:59

ООП через функцию
 
Помогите пожалуйста.

Пишу код для слайдера самопального, он такой

function SliderMe(){
		var containerItem = document.getElementById("container_item");
		var contentItem = document.getElementsByClassName("content_item");
		var contentItemCount = contentItem.length;
		var contentItemWidth = contentItem[0].offsetWidth;
		var count=0;
		containerItem.style.width = contentItemCount * contentItemWidth + 'px';
		this.rigthScroll = function (){
			if(this.count>=0 && this.count<contentItemCount) {
				this.containerItem.style.marginLeft = -(this.count + 1 ) * this.contentItemWidth;
				this.count++; 
			}
		}.bind(this);
	}
	var slidersMe = new SliderMe();


Почему создается пустой объект я не могу разобраться..

рони 22.05.2017 17:04

Gorge,
getElementsByClassName -- это список, а не один элемент, и значит нужен индекс
document.getElementsByClassName("content_item")[0];
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

ruslan_mart 22.05.2017 17:08

Цитата:

Сообщение от Gorge
this.rigthScroll

:-?

right

Gorge 22.05.2017 17:10

так я в отдельном фале пишу, который подключил в html через script.

Весь код такой
(function(){

	function SliderMe(){
		var containerItem = document.getElementById("container_item");
		var contentItem = document.getElementsByClassName("content_item");
		var contentItemCount = contentItem.length;
		var contentItemWidth = contentItem[0].offsetWidth;
		var count=0;
		containerItem.style.width = contentItemCount * contentItemWidth + 'px';
		this.rightScroll = function (){
			if(this.count>=0 && this.count<contentItemCount) {
				this.containerItem.style.marginLeft = -(this.count + 1 ) * this.contentItemWidth;
				this.count++; 
			}
		}.bind(this);
	}
	var slidersMe = new SliderMe();
	

}());

рони 22.05.2017 17:26

Gorge,
может нет ещё элементов на странице?

Gorge 22.05.2017 17:36

есть, подключил в конце body. в отладчике chrome видит и находит их. из всего что получается создается объект, в нем одна функция - пустая, но ни одной переменной в объекте нет..

ruslan_mart 22.05.2017 18:05

var SliderMe = (function() {

	function SliderMe(){
		this.containerItem = document.getElementById('container_item');
		this.contentItem = document.getElementsByClassName('content_item');
		this.contentItemCount = this.contentItem.length;
		this.contentItemWidth = this.contentItem[0].offsetWidth;
		this.count = 0;
		this.containerItem.style.width = this.contentItemCount * this.contentItemWidth + 'px';
	}

	SliderMe.prototype.rightScroll = function() {
		if(this.count >= 0 && this.count < this.contentItemCount) {
			this.containerItem.style.marginLeft = -(this.count++ + 1) * this.contentItemWidth;
		}
	};

	return SliderMe;
}());


var slidersMe = new SliderMe();

Gorge 22.05.2017 18:15

Спасибо - заработало! А при объявлении и присвоении переменным this обязательно ставить, просто тогда они будут доступны снаружи, а этого не хотелось бы?

рони 22.05.2017 18:40

Цитата:

this.count < contentItemCount
Цитата:

-(this.count++ + 1)
это верно?

Gorge 22.05.2017 18:46

нет неправильно :) я только учусь - поэтому методом проб и ошибок!


Часовой пояс GMT +3, время: 17:20.