Несколько условий if или сокращение кода
 

Здравствуйте. Стоит задача при определенных нескольких условиях выполнять одно, а при определенных других условиях - второе.

Вот код:

$(document).ready(function(){
  $(window).scroll(function() {
    var top = $(this).scrollTop();
    
    if ( top >= $(window).height()*5.245)) {
			$("#a7").css({
      	'background-image':'url(grey.png)',
        'border-color':'#252525'
        });
        }
        
    if ( top >= $(window).height()*5.545)) {
      $("#a7").css({
        'background-image':'url(white.png)',
        'border-color':'#fff'
        });
        }

    if (top >= $(window).height()*6.315) {
			$("#a7").css({
      	'background-image':'url(grey.png)',
        'border-color':'#252525'
        });
        }
        
    if (top >= $(window).height()*7.215) {
      $("#a7").css({
        'background-image':'url(white.png)',
        'border-color':'#fff'
        });
        }

})
});

Дело в том, что таких условий 56 штук. Можно ли как-то сократить эту конструкцию?

Например, что-то вроде этого:

$(document).ready(function(){
  $(window).scroll(function() {
    var top = $(this).scrollTop();
    
    if ( (top >= $(window).height()*5.245) || (top >= $(window).height()*6.315)) {
			$("#a7").css({
      	'background-image':'url(grey.png)',
        'border-color':'#252525'
        });
        }
        
    else if ( (top >= $(window).height()*5.545) || (top >= $(window).height()*7.215)) {
      $("#a7").css({
        'background-image':'url(white.png)',
        'border-color':'#fff'
        });
        }

})
});

Но тут, понятное дело, это не работает, т.к срабатывает только первый аргумент в каждом условии, как только становится true, а остальное игнорируется. А нужно чтобы при всех указанных условиях срабатывало событие.

Иначе говоря, нужно чтобы css применился к одному блоку при прокрутке несколько раз в соответствии с параметрами условия, когда они становятся true. Только вот покороче бы это записать, не могу найти решения.

Кто-нибудь может подсказать в каком направлении идти?

aksak1988,

$(document).ready(function() {

	var $a7 = $('#a7');
	
	var colors = ['#ffffff', '#252525'];
	
	var $window = $(window);
	
	$window.scroll(function() {
		
		var top = $window.scrollTop();
		var height = $window.height();
		
		var index, color;

		if (top < height * 5.245) {
			index = 0;
		} else if (top < height * 5.545) {
			index = 1;
		} else if (top < height * 6.315) {
			index = 0;
		} else if (top < height * 7.215) {
			index = 1;
		} else if (top < height * 8.888) {
			index = 0;
		} else {// top > height * 8.888
			index = 1;
		}
		
		color = colors[index];

		$a7.css({// #ffffff.png, #252525.png, ...
			'background-image': 'url(' + color + '.png)',
			'border-color': color
		});
		
	});
	
});

Rise,
спасибо!

Вот что вышло. Спасибо еще раз за помощь.

А еще можно switch-case использовать. Должно получиться меньше кода

Да, как пример с операторами сравнения:

var num = 30;
 
switch (true) {
  case num == 0:
    document.write("num: " + num);
    break;
  case num > 5 && num < 15:
    document.write("num между 5 и 15");
    break;
  case num > 20:
    document.write("num: " + num);
    break;
}

Но в моем случае нужно было на несколько true чтобы был один результат. А тут его пришлось бы по нескольку раз писать.

Поскольку в примере от Rise все условия одинаковые, предложу еще такую модификацию

$(document).ready(function() {
	var $a7 = $('#a7');
	var colors = ['#ffffff', '#252525'];
	var $window = $(window);
	var arr=[
		{n: 5.245, typ: 0},
		{n: 5.545, typ: 1}, 
		{n: 6.315, typ: 0}, 
		{n: 7.215, typ: 1},
		{n: 8.888, typ: 0}
	];
	$window.scroll(function() {
		var top = $window.scrollTop();
		var height = $window.height();
		var color;
		var index = 1;
		for (var i=0; i<arr.length; i++) {
			if (top < height * arr[i].n) {
				index = arr[i].typ;
				break;
			}
		};
		color = colors[index];
		$a7.css({// #ffffff.png, #252525.png, ...
			'background-image': 'url(' + color + '.png)',
			'border-color': color
		});
	});
});

ksa,
респект!!!