Форум

4ildren · #1 (**permalink**) 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 · #2 (**permalink**) 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 · #3 (**permalink**) 28.09.2011, 23:07

что должен делать код?

4ildren · #4 (**permalink**) 28.09.2011, 23:21

http://razorjack.net/quicksand/demos/attribute.html

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

4ildren · #5 (**permalink**) 29.09.2011, 13:47

Без шансов?

ksa · #6 (**permalink**) 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 · #7 (**permalink**) 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 · #8 (**permalink**) 29.09.2011, 14:36

Сообщение от 4ildren

То есть вот так?

Можно даже так

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

4ildren · #9 (**permalink**) 29.09.2011, 15:16

А в остальном по синтаксису самого скрипта всё правильно? Будет работать?

Цикл1 {

функция {размер

Цикл2 {

функция {стиль}

}

ksa · #10 (**permalink**) 29.09.2011, 15:19

Сообщение от 4ildren

всё правильно? Будет работать?

Т.е. мне еще и тестировать?

Форум

Справочник

Discord чат

Курсы javascript