Dwie postacie kodu jQuery - tylko jeden działa.

Question

Witam. Mam, wydaje mi się, banalny problem. Otóż poniższy kod działa poprawnie:
 

$(document).ready(function()
{			
			if ($(window).scrollTop() + document.documentElement.clientHeight*0.8 > $(".post55").offset().top)
				{ 
					$(".post55").addClass('animation-post');
				}
			$(window).scroll(function()
			{
				if ($(window).scrollTop() + document.documentElement.clientHeight*0.8 > $(".post55").offset().top)
				{ 
					$(".post55").addClass('animation-post');
				}
			});
			
			if ($(window).scrollTop() + document.documentElement.clientHeight*0.8 > $(".post54").offset().top)
				{ 
					$(".post54").addClass('animation-post');
				}
			$(window).scroll(function()
			{
				if ($(window).scrollTop() + document.documentElement.clientHeight*0.8 > $(".post54").offset().top)
				{ 
					$(".post54").addClass('animation-post');
				}
			});
			
});

 

 

Natomiast poniższy kod nie działa:
 

$(document).ready(function()
{			
		for(var x=55;x>53; x--)	
		{	
			var post = ".post" + x;
			if ($(window).scrollTop() + document.documentElement.clientHeight*0.8 > $(post).offset().top)
				{ 
					$(post).addClass('animation-post');
				}
			$(window).scroll(function()
			{
				if ($(window).scrollTop() + document.documentElement.clientHeight*0.8 > $(post).offset().top)
				{ 
					$(post).addClass('animation-post');
				}
			});
			
	}
			
});

 

 

Moim zdanie te dwa kody powinny wykonać tą samą robotę. Niestety, kod z pętlą for nie działa i nie rozumiem dlaczego. Proszę i pomoc i z góry dziękuje :)

Comments

Najlepiej zrób sobie funkcje z kodu, który ma się wykonywać podczas skrolowania.

function animatePost(className) {
  className = '.' + className;
  var windowTop = $(window).scrollTop();
  var docHeight = document.documentElement.clientHeight*0.8;
  var elementOffsetTop = $(className).offset().top
  if((windowTop + docHeight) > elementOffsetTop) { 
    $(className).addClass('animation-post');
  }
}
/* np. animatePost('post54') */

 

---

$(document).ready(function()
{			
	function animatePost(className) 
	{
		className = '.' + className;
		var windowTop = $(window).scrollTop();
		var docHeight = document.documentElement.clientHeight*0.8;
		var elementOffsetTop = $(className).offset().top
		if((windowTop + docHeight) > elementOffsetTop)
		{ 
			$(className).addClass('animation-post');
		}
	}
	
	for(var x=55; x>53; x--)
	{
		var post = "post" + x;
		$(window).scroll(function()
		{
			animatePost(post);				
		});
		animatePost(post);		
	}
	
});

 

 

 

Napisałem coś takiego, niestety nie działa.

---

$(window).scroll(function(){
  animatePost('post54');
  animatePost('post55');
});

---

Ten sposób dla mnie nie jest zbyt dobry

Mamy 55 postów wczytywanych z bazy danych.
Nie da się tego bardziej optymalnie zrobić ?

 

 

EDIT:
 

$(document).ready(function()
{			
	function animatePost(className) 
	{
		className = '.' + className;
		var windowTop = $(window).scrollTop();
		var docHeight = document.documentElement.clientHeight*0.8;
		var elementOffsetTop = $(className).offset().top
		if((windowTop + docHeight) > elementOffsetTop)
		{ 
			$(className).addClass('animation-post');
		}
	}
	
	
		$(window).scroll(function()
		{
			for(var x=55; x>0; x--)
			{
				var post = "post" + x;
				animatePost(post);
			}			
		});
		for(var x=55; x>0; x--)
			{
				var post = "post" + x;
				animatePost(post);
			}			
	
	
});

Udało się. Bardzo dziękuję za pomoc!

---

Było tak od razu, myslalem, że jedynie dla dwóch elementów chcesz to zrobić. Zamiast 'var' użyj 'let'

@edit

W sumie teraz jest lepiej.