Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Связка switch-case и массива (https://javascript.ru/forum/jquery/40419-svyazka-switch-case-i-massiva.html)

Алек 04.08.2013 21:16

Связка switch-case и массива
 
Доброго всем времени суток!
Ломаю голову над таким вопросом:
Вот html код:
<div id="galeryMoto">
					<img src="images/gal/1.jpg" />
				</div>
				<input type="submit" id="prev" value="Назад" />
				<input type="submit" id="next" value="Вперёд" />

Вот JQuery:
$('#next').click(function(){
		switch ($('#galeryMoto img').attr('src')){
			case 'images/gal/1.jpg':
			nova ( 'images/gal/2.jpg', 'url(images/gal/2.jpg)', 'explode');		
			break;	
			case 'images/gal/2.jpg':
			nova ('images/gal/3.jpg', 'url(images/gal/3.jpg)', 'drop');		
			break;
			case 'images/gal/3.jpg':
			nova ( 'images/gal/4.jpg', 'url(images/gal/4.jpg)', 'explode');		
			break;	
			case 'images/gal/4.jpg':
			nova ('images/gal/1.jpg', 'url(images/gal/1.jpg)', 'drop');		
			break;			
		}			
	})
	
	function nova (images, background, effect) {
		$('#galeryMoto').css({'background-image':background});
		$('#galeryMoto img').hide(effect, 1000).attr('src', images).show(1);				
	}

Всё хорошо работает, но что если я захочу расширить галерею до 20 изображений? Тогда придётся добавлять кучу операторов case!
Я вот что думаю:
Сделать три массива, в первом будут атрибуты src для картинок,
во втором бэкграунды,
в третьем эффекты.
После создать функцию в кейсе, которая будет получать данные из массива, сравнивать с текущим значением атрибута src и в качестве параметра передавать в функцию nova следующий элемент массива.
Что-то вроде того:
var ArrayForImg = [/*Элементы массива*/];
	var CountArrayForImg = for (var i = 0, i < ArrayForImg.length, i++){
		return (ArrayForImg[i]);
	}


Но мне абсолютно не ясно как полученный в цикле результат запихать в кейс!:blink:
Как же тогда сравнивать со всеми элементами массива?:blink:
Есть какие-нибудь идеи?
Заранее большое всем спасибо!

bes 04.08.2013 22:18

Алек, 3 месяца на форуме, тестовых примеров с возможностью запуска делать не научился? :-/

Цитата:

Сообщение от Алек
var CountArrayForImg = for (var i = 0, i < ArrayForImg.length, i++){

и вот это чё такое?

Алек 04.08.2013 22:49

Цитата:

Сообщение от bes (Сообщение 265846)
Алек, 3 месяца на форуме, тестовых примеров с возможностью запуска делать не научился? :-/

Неа, :( , а хотелось бы...
Можно ссылочку дать где про это говориться?

Цитата:

Сообщение от bes (Сообщение 265846)
и вот это чё такое?

var CountArrayForImg = for (var i = 0, i < ArrayForImg.length, i++) :haha:

Да чё-то у меня дико ни чё не получается, :( , я делаю всё по шагам, и вот такая проблема:
Вот так работает, выводится хорошо, вполне можно передавать в параметр функции, только кавычки приплюсовать:
var ArrayForImg = ['images/gal/2.jpg', 'url(images/gal/2.jpg)', 'explode'];
	for (var i = 0; i < ArrayForImg.length; i++){
		document.write (ArrayForImg[i] + "<br />");
	}

А вот так выводится только последний элемент, не могу понять в чём дело:
var ArrayForImg = ['images/gal/2.jpg', 'url(images/gal/2.jpg)', 'explode'];
	for (var i = 0; i < ArrayForImg.length; i++){
		var ImgText = ArrayForImg[i];
	}

$('#forresults').text(ImgText);

На мой взгляд всё вроде логично...

bes 04.08.2013 22:57

Цитата:

Сообщение от Алек
Можно ссылочку дать где про это говориться?

http://javascript.ru/formatting
собираешь весь код в один тестовый пример и заключаешь его в [html run] и усё

вот тебе один из простых вариантов next
var mas = ["image1", "image2", "image3"];
function next(eq) {
	var eq = mas.indexOf(eq);
	if (eq == -1) 
		return mas[0];
	if (mas[eq + 1] == undefined) 
		return mas[eq];
	return mas[eq + 1];
}
alert(next("image1"));
alert(next("image3"));
alert(next("image4"));

indexOf для массивов не для IE<9, можно сделать функцию-эмулятор, где в цикле идёт перебор со сравнением

Алек 05.08.2013 00:33

bes, спасибо!
indexOf прекрасный метод, весь код свёлся к 4 строчкам, а функционал увеличился!
Вот как это теперь выглядит:
var array = ['images/gal/1.jpg', 'images/gal/2.jpg', 'images/gal/3.jpg', 'images/gal/4.jpg',];

$('#next1').click(function(){
var itog = array.indexOf($('#galeryMoto1 img').attr('src'));
$('#galeryMoto1 img').attr('src', (array[itog + 1]));
});

Теперь, если я захочу добавить в галерею сколько угодно изображений, мне достаточно просто использовать метод
array.push('images/gal/5.jpg');

Осталось только по этой схеме доработать эфекты.
Ещё раз спасибо!


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