Как ограничить плагин Jquery для каждого элемента?

Question

[Турар Абу]

Доброго времени суток, уважаемые форумчане. У меня такая проблема:
Я писал плагин на Jquery ( Вот тут ошибка ) и там всё работает замечательно, то есть почти работает. Все настройки принимаются, работают все анимации, размер и т.д. Но, когда я попытался запустить этот плагин на двух разных элементах, то у меня она начинает работать, как-то не правильно
Так работает:

<div class="loader1"></div>

<script>
 $('.loader1').doomPreloader({'type ' :'snake'});
</script>

Так не работает:

<div class="loader1"></div>
<BR>
<div class="loader2"></div>

<script>
 $('.loader1').doomPreloader({'type ' :'snake'});
 $('.loader2').doomPreloader();
</script>

А точнее, эти два элемента, сливаются в один элемент и анимация у второго элемента перестает работать, но ведет себя как первый элемент, а первый элемент работает нормально.
В чем может быть проблема? Как сделать так, чтобы каждый элемент работал независимо от другого?

Answer 1

[Виталий Желтяков]

Скорее всего у вас перекрываются переменные в области видимости. Решается это при помощи замыканий.

Хотите точнее - показывайте код

Comments

[Турар Абу]

ну так я дал ссылку на сам файл. Код писать будет глупо, т.к. писать все 252 строк мне кажется не уместным

[Виталий Желтяков]

@kemply К выложенному вами файлу нет доступа

[Турар Абу]

@VitaZheltyakov написал код

Answer 2

[Турар Абу]

Тогда вот код:

(function($){
	$.fn.doomPreloader = function(options){
		function(){
		var setting = $.extend({
			'type':			'classic',
			'size':			20,
			'time':			800,
			'freeze':		200,
			'circle':		true,
			'height':		false,
			'colorOne':		'#66CEEB',
			'colorTwo':		'#66CEEB',
			'colorThree':	'#66CEEB',
			'colorFour':	'#66CEEB'
		}, options);
		 
		
		var $color = [];
		var $load = [];
		var $freeze = setting.freeze;
		var $time = setting.time;
		var $circle = '50%';
		
		$color[0] = setting.colorOne;
		$color[1] = setting.colorTwo;
		$color[2] = setting.colorThree;
		$color[3] = setting.colorFour;
		
		if(setting.circle){
			setting.height = setting.size;
		}
		
		function readyI($this){
			function stepTwo(){
				$temp = 0;
				$('.doomPreloader i').addClass('doomPreloaderI').each(function(){
					$(this).width(setting.size);
					$(this).height(setting.height);
					if(setting.circle){
						if(typeof(setting.circle) == "number"){
							$circle = setting.circle + '%';
						}else{
							$circle = '50%';
						}
					}else{
						$circle = '0px';
					}
					$(this).css({'border-radius':$circle,'display':'inline-block','background':$color[$temp]});
					$temp++;
				});
			}
			function stepOne(){
				$doomPreloader = '<i></i>';
				$doomPreloader = $doomPreloader + $doomPreloader + $doomPreloader + $doomPreloader;
				$this.html($doomPreloader);
				$this.addClass('doomPreloader');
				stepTwo();
			}
			
			stepOne();
			stepTwo();
		}
		function moveI($this){
			$load[0] = $('.doomPreloader .doomPreloaderI').eq(0);
			$load[1] = $('.doomPreloader .doomPreloaderI').eq(1);
			$load[2] = $('.doomPreloader .doomPreloaderI').eq(2);
			$load[3] = $('.doomPreloader .doomPreloaderI').eq(3);
			$doomPreloader = $this;
			function doomPreloaderClassic(){
				$size = setting.size;
				$sizeOne = $size / 2;
				$sizeTwo = $size * 2;
				$load[0].css({'opacity':'0.0','marginLeft':$sizeOne,'marginRight':$size});
				function doomPreloaderClassicMove(){
					function doomPreloaderClassicReset(){
						$tempOne = $load[0].css('background');
						$tempTwo = $load[1].css('background');
						$tempThr = $load[2].css('background');
						$tempFou = $load[3].css('background');
						var $marginTrue = 0;
						if(setting.circle = 'none'){
							$marginTrue = 1;
						}
						$load[0].css({'background':$tempFou});
						$load[1].css({'background':$tempOne,'marginLeft':$marginTrue});
						$load[2].css({'background':$tempTwo,'marginLeft':$marginTrue});
						$load[3].css({'background':$tempThr,'marginLeft':$marginTrue});
						
						$load[0].css({'opacity':'0.0','marginLeft':$sizeOne,'marginRight':$size});
						$load[3].css({'opacity':'1.0','marginLeft':1});
						
						doomPreloaderClassicMove();
					}
					$load[0].animate({'opacity':'1.0','marginRight':1,'marginLeft':$sizeTwo+$sizeOne}, $time);
					$load[3].animate({'opacity':'0.0','marginLeft':$size}, $time);
					
					setTimeout(doomPreloaderClassicReset, $time+$freeze);
				}
				doomPreloaderClassicMove();
			}
			function doomPreloaderSnake(){
				var $n = 0;
				$timeS = $time / 8;
				function doomPreloaderSnakeMove(){
					function doomPreloaderSnakeMoveFour(){
						$load[3].css({'opacity':'1.0'});
						$load[3].animate({'opacity':'0.0'}, $time);
						setTimeout(doomPreloaderSnakeMoveOne, $freeze+$time);
					}
					function doomPreloaderSnakeMoveThree(){
						$load[2].css({'opacity':'1.0'});
						$load[2].animate({'opacity':'0.0'}, $time);
						setTimeout(doomPreloaderSnakeMoveFour, $timeS);
					}
					function doomPreloaderSnakeMoveTwo(){
						$load[1].css({'opacity':'1.0'});
						$load[1].animate({'opacity':'0.0'}, $time);
						setTimeout(doomPreloaderSnakeMoveThree, $timeS);
					}
					function doomPreloaderSnakeMoveOne(){
						$load[0].css({'opacity':'1.0'});
						$load[0].animate({'opacity':'0.0'}, $time);
						setTimeout(doomPreloaderSnakeMoveTwo, $timeS);
					}
					setTimeout(doomPreloaderSnakeMoveOne, $timeS);
				}
				$load[0].css({'opacity':'1.0'});
				$load[1].css({'opacity':'0.0'});
				$load[2].css({'opacity':'0.0'});
				$load[3].css({'opacity':'0.0'});
				
				doomPreloaderSnakeMove();
			}
			if(setting.type == 'classic'){
				doomPreloaderClassic();
			}
			if(setting.type == 'snake'){
				doomPreloaderSnake();
			}
			if(setting.type == 'clock'){
				doomPreloaderClock();
			}
			if(setting.type == 'bowl'){
				doomPreloaderBowl();
			}
		}
		
		readyI(this);
		moveI(this);
		
		
	};
})(jQuery);

и если в HTML документе запустить этот скрипт на двух элементах:

<div class="loader1"></div>
<BR>
<div class="loader2"></div>
<script>
 $('.loader1').doomPreloader();
 $('.loader2').doomPreloader({'type':'snake'});
<script>

то плагин просто перестанет работать

Answer 3

[Денис Инешин]

Для создания плагинов используйте уже готовые, протестированные паттерны:
shichuan.github.io/javascript-patterns/#jquery-plu... и проблем не будет.