Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Наверное, массивы (https://javascript.ru/forum/misc/21902-navernoe-massivy.html)

4ildren 28.09.2011 22:55
Наверное, массивы
 
Всем здравствуйте.
Пытаюсь писать на jQuery, но вопрос не по библиотеке, собственно.
Есть элемент кода:
$('#[*id*] .sort a#' + размер1).click(function(e) {
	$('#[*id*] .all').quicksand( $('#[*id*] .format' + размер1 + 'li'));
											e.preventDefault();
											
			$("#[*id*] a#style" + стиль1).click(function(e){
			$('#[*id*] .all').quicksand( $('#[*id*] #' + размер1 + стиль1 + 'li'));
											e.preventDefault();});
											
			$("#[*id*] a#style" + стиль2).click(function(e){
			$('#[*id*] .all').quicksand( $('#[*id*] #' + размер1 + стиль2 + 'li'));
											e.preventDefault();});
											
			$("#[*id*] a#style" + стиль3).click(function(e){
			$('#[*id*] .all').quicksand( $('#[*id*] #' + размер1 + стиль3 + 'li'));
											e.preventDefault();});
											
			$("#[*id*] a#style" + стиль4).click(function(e){
			$('#[*id*] .all').quicksand( $('#[*id*] #' + размер1 + стиль4 + 'li'));
											e.preventDefault();});
											
			$("#[*id*] a#style" + стиль5).click(function(e){
			$('#[*id*] .all').quicksand( $('#[*id*] #' + размер1 + стиль5 + 'li'));
											e.preventDefault();});
											
			$("#[*id*] a#style" + стиль6).click(function(e){
			$('#[*id*] .all').quicksand( $('#[*id*] #' + размер1 + стиль6 + 'li'));
											e.preventDefault();});
	});

Внимание стоит обратить на кириллические части кода.
Есть 3 размера (размер1, размер2, размер3) и 6 стилей (стиль1, стиль2...).
Тут приведен код по размеру номер 1.
Такой же точно код только с размером2 и размером3 я не запостил - он такой же.
По каждому размеру перебираются 6 стилей.
Вопрос: как упростить код? (Наверное, с помощью массивов - я несилён)
Потому что сейчас он занимает какое-то нереальное кол-во строк.
Подскажите, пожалуйста.
Заранее спасибо.

4ildren 28.09.2011 23:04
На всякий случай, весь код целиком
$('#[*id*] .sort a#' + размер1).click(function(e) {
	$('#[*id*] .all').quicksand( $('#[*id*] .format' + размер1 + 'li'));
											e.preventDefault();
											
			$("#[*id*] a#style" + стиль1).click(function(e){
			$('#[*id*] .all').quicksand( $('#[*id*] #' + размер1 + стиль1 + 'li'));
											e.preventDefault();});
											
			$("#[*id*] a#style" + стиль2).click(function(e){
			$('#[*id*] .all').quicksand( $('#[*id*] #' + размер1 + стиль2 + 'li'));
											e.preventDefault();});
											
			$("#[*id*] a#style" + стиль3).click(function(e){
			$('#[*id*] .all').quicksand( $('#[*id*] #' + размер1 + стиль3 + 'li'));
											e.preventDefault();});
											
			$("#[*id*] a#style" + стиль4).click(function(e){
			$('#[*id*] .all').quicksand( $('#[*id*] #' + размер1 + стиль4 + 'li'));
											e.preventDefault();});
											
			$("#[*id*] a#style" + стиль5).click(function(e){
			$('#[*id*] .all').quicksand( $('#[*id*] #' + размер1 + стиль5 + 'li'));
											e.preventDefault();});
											
			$("#[*id*] a#style" + стиль6).click(function(e){
			$('#[*id*] .all').quicksand( $('#[*id*] #' + размер1 + стиль6 + 'li'));
											e.preventDefault();});
	});
	
	$('#[*id*] .sort a#' + размер2).click(function(e) {
	$('#[*id*] .all').quicksand( $('#[*id*] .format' + размер2 + 'li'));
											e.preventDefault();
											
			$("#[*id*] a#style" + стиль1).click(function(e){
			$('#[*id*] .all').quicksand( $('#[*id*] #' + размер2 + стиль1 + 'li'));
											e.preventDefault();});
											
			$("#[*id*] a#style" + стиль2).click(function(e){
			$('#[*id*] .all').quicksand( $('#[*id*] #' + размер2 + стиль2 + 'li'));
											e.preventDefault();});
											
			$("#[*id*] a#style" + стиль3).click(function(e){
			$('#[*id*] .all').quicksand( $('#[*id*] #' + размер2 + стиль3 + 'li'));
											e.preventDefault();});
											
			$("#[*id*] a#style" + стиль4).click(function(e){
			$('#[*id*] .all').quicksand( $('#[*id*] #' + размер2 + стиль4 + 'li'));
											e.preventDefault();});
											
			$("#[*id*] a#style" + стиль5).click(function(e){
			$('#[*id*] .all').quicksand( $('#[*id*] #' + размер2 + стиль5 + 'li'));
											e.preventDefault();});
											
			$("#[*id*] a#style" + стиль6).click(function(e){
			$('#[*id*] .all').quicksand( $('#[*id*] #' + размер2 + стиль6 + 'li'));
											e.preventDefault();});
	});
	
	$('#[*id*] .sort a#' + размер3).click(function(e) {
	$('#[*id*] .all').quicksand( $('#[*id*] .format' + размер3 + 'li'));
											e.preventDefault();
											
			$("#[*id*] a#style" + стиль1).click(function(e){
			$('#[*id*] .all').quicksand( $('#[*id*] #' + размер3 + стиль1 + 'li'));
											e.preventDefault();});
											
			$("#[*id*] a#style" + стиль2).click(function(e){
			$('#[*id*] .all').quicksand( $('#[*id*] #' + размер3 + стиль2 + 'li'));
											e.preventDefault();});
											
			$("#[*id*] a#style" + стиль3).click(function(e){
			$('#[*id*] .all').quicksand( $('#[*id*] #' + размер3 + стиль3 + 'li'));
											e.preventDefault();});
											
			$("#[*id*] a#style" + стиль4).click(function(e){
			$('#[*id*] .all').quicksand( $('#[*id*] #' + размер3 + стиль4 + 'li'));
											e.preventDefault();});
											
			$("#[*id*] a#style" + стиль5).click(function(e){
			$('#[*id*] .all').quicksand( $('#[*id*] #' + размер3 + стиль5 + 'li'));
											e.preventDefault();});
											
			$("#[*id*] a#style" + стиль6).click(function(e){
			$('#[*id*] .all').quicksand( $('#[*id*] #' + размер3 + стиль6 + 'li'));
											e.preventDefault();});
	});

melky 28.09.2011 23:07
что должен делать код?

4ildren 28.09.2011 23:21
http://razorjack.net/quicksand/demos/attribute.html

Вот такое происходит с превьюшками корпоративных праздников (больших, маленьких, средних) в разных стилях: ковбои, 19 век, цыгане...
То есть можно отсортировать все большие программы в стиле вестерн, все большие в стиле 19 века, все средние в цыганском стиле - в общем, любые комбинации.
При этом есть готовые списки, уже рассортированные.
Скрипт просто выполняет прикольную анимацию перехода от одного списка к другому.

4ildren 29.09.2011 13:47
Без шансов? :cray:

ksa 29.09.2011 13:54
Конечно массивы...

$("#[*id*] a#style" + st[j]).click(function(e){
   $('#[*id*] .all').quicksand( $('#[*id*] #' + size[i] + st[j] + 'li'));
   e.preventDefault();
});


И два цикла. По i и по j...

4ildren 29.09.2011 14:06
То есть вот так? И это заменит полностью весь длиннющий скрипт?
P.S. С синтаксисом всё так?
var size = new Array();
size[0] = "small";
size[1] = "medium";
size[2] = "large";

var st = new Array();
st[0] = "west";
st[1] = "gypsy";
st[2] = "xix";
st[3] = "horse";
st[4] = "extreme";
st[5] = "moscow";

for (var i=0; i<size.length; i++) {
for (var j=0; j<st.length; j++) {
$("#[*id*] a#style" + st[j]).click(function(e){
	   $('#[*id*] .all').quicksand( $('#[*id*] #' + size[i] + st[j] + 'li'));
	   e.preventDefault();
	});
}
}


UPD: сейчас заметил: там же конструкция "функция(размер1){функция(ст иль1-6)}, функция(размер2){функция(ст ль1-6)}, функция(размер3){функция(ст ль1-6)}. А если вышеприведенная как раз только для внутренних функций "функция(стиль1-6)". То есть надо так?

var size = new Array();
size[0] = "small";
size[1] = "medium";
size[2] = "large";

var st = new Array();
st[0] = "west";
st[1] = "gypsy";
st[2] = "xix";
st[3] = "horse";
st[4] = "extreme";
st[5] = "moscow";




for (var i=0; i<size.length; i++) {
            $('#[*id*] .sort a#' + size[i]).click(function(e) {
	    $('#[*id*] .all').quicksand( $('#[*id*] .format' + size[i] + 'li'));
	                                            e.preventDefault();
for (var j=0; j<st.length; j++) {
$("#[*id*] a#style" + st[j]).click(function(e){
	   $('#[*id*] .all').quicksand( $('#[*id*] #' + size[i] + st[j] + 'li'));
	   e.preventDefault();
	});
}
});
}

ksa 29.09.2011 14:36
Цитата:
Сообщение от 4ildren
То есть вот так?
Можно даже так :)

var size = ["small", "medium", "large"]

4ildren 29.09.2011 15:16
А в остальном по синтаксису самого скрипта всё правильно? Будет работать?

Цикл1 {
функция {размер
Цикл2 {
функция {стиль}
}
}
}

ksa 29.09.2011 15:19
Цитата:
Сообщение от 4ildren
всё правильно? Будет работать?
Т.е. мне еще и тестировать? :lol:

4ildren 29.09.2011 15:42
Нет-нет, что вы ))
Имелось в виду: "похоже ли с виду на правду" ))
Спасибо. Ушел тестировать.

4ildren 29.09.2011 21:04
Протестировал. Не работает.
Пытаюсь вызвать alert по клику (см. код ниже) - возвращает undefined.
Если вызывать alert вне функции клика (а до неё), возвращает подряд все три значения массива, а по клику - нет. =(
for (var i=0; i<size.length; i++) {  
            $('#[*id*] .sort a#' + size[i]).click(function(e) { alert(size[i]);
	    $('#[*id*] .all').quicksand( $('#[*id*] .format' + size[i] + ' li'));
	                                        e.preventDefault();
			});
}

4ildren 29.09.2011 22:50
Если точнее, то в функцию не передаётся значение [i]. Если написать просто alert(size), вернет все значения массива через запятую, а не то, по которому случилось событие .click();

UPD: Иными словами, как передать переменную цикла в функцию, которая начинается внутри этого цикла. Гугл ничего дельного (ну, или мне понятного) не выдаёт =(

4ildren 30.09.2011 01:45
Решение нашлось вот тут: http://www.cyberforum.ru/javascript-...ead337692.html
Работающий код в итоге такой:
var size = ("small","medium","large");
var st = ("west", "gypsy", "xix", "horse", "extreme", "moscow");

for (var i=0; i<size.length; i++) { 
			(function(n){
				$('.sort a#' + size[n]).click(function(e) {
					$(pid + ' .all').quicksand( $(pid + ' .format' + size[n] + ' li'));
	                                        e.preventDefault();


		for (var j=0; j<st.length; j++) { 
					(function(m){
						$("a#style" + st[m]).click(function(e){
							$(pid + ' .all').quicksand( $(pid + ' #' + size[n] + st[m] + ' li'));
									e.preventDefault();
						});
					})(j);
		}
				});
			})(i);
}

melky 30.09.2011 09:15
Цитата:
Сообщение от 4ildren (Сообщение 128827)
Решение нашлось вот тут: http://www.cyberforum.ru/javascript-...ead337692.html
Работающий код в итоге такой:
var size = *!*("small","medium","large");*/!*
var st = *!*("west", "gypsy", "xix", "horse", "extreme", "moscow");*/!*
...
работающий ??

4ildren 30.09.2011 23:27 
var size = new Array();
size[0] = "small";
size[1] = "medium";
size[2] = "large";

var st = new Array();
st[0] = "west";
st[1] = "gypsy";
st[2] = "xix";
st[3] = "horse";
st[4] = "extreme";
st[5] = "moscow";

Вот с этим. Да.
P.S.: Для поисковиков и ищущих. В этой теме были решены такие проблемы, как: "оптимизировать javascript jquery код, сократить код, массивы, переменная цикла не передаётся в функцию, функция внутри цикла, передать переменную в функцию, массив не работает в функции."

melky 30.09.2011 23:43
можно было просто круглые скобки заменить на квадратные :)
var size = ["small","medium","large"];
var st = ["west", "gypsy", "xix", "horse", "extreme", "moscow"];
...

4ildren 01.10.2011 00:04
Синтаксис, синтаксис и ещё раз синтаксис ))
Частным преподавательством не занимаетесь по JS? ))

melky 01.10.2011 00:15
о нет. вы на возраст посмотрите ) какое преподавательство - я только сам в этом году начал их слушать :)

4ildren 01.10.2011 01:41
А мне казалось, что возраст не влияет на степень квалификации в некоторых случаях.
Я, когда мне было 18, преподавал бизнес-английский взрослым дядечкам и тётечкам и они были довольны =)

melky 01.10.2011 10:39
а я не про квалификацию :)


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