Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.07.2011, 12:39
Аватар для Ankh
Новичок на форуме
Отправить личное сообщение для Ankh Посмотреть профиль Найти все сообщения от Ankh
 
Регистрация: 20.07.2011
Сообщений: 9

... и все же, как прогнать в цикле?
Доброе время суток. Совсем недавно взялся за изучение JS, и вчера имел честь написать свой первый скрипт. Все, чудесно, все работает, но длина: 100 строк. Можно ли укоротить этот кошмар шедевр путем использования цикла? Или иные варианты сделать код короче. Заранее спасибо!
// JavaScript Document
var imgArr = ["url('./img/pic_1.png')","url('./img/pic_2.png')","url('./img/pic_3.png')","url('./img/pic_4.png')"];
var background = "url('./img/podlojka.png')";
var background_empty = "url('./img/podlojka_empty.png')";

function Wallpaper() {
	var element1 = document.getElementById('price1');
	element1.onmouseover = ShowBackElement1;
	element1.onmouseout = HideBackElement1;
	var element2 = document.getElementById('price2');
	element2.onmouseover = ShowBackElement2;
	element2.onmouseout = HideBackElement2;
	var element3 = document.getElementById('price3');
	element3.onmouseover = ShowBackElement3;
	element3.onmouseout = HideBackElement3;
	var element4 = document.getElementById('price4');
	element4.onmouseover = ShowBackElement4;
	element4.onmouseout = HideBackElement4;
}

function ShowBackElement1() {
	var backgroung = document.getElementById('price1');
	backgroung.style.backgroundImage = background;
	var red = document.getElementById('under_price1');
	red.style.color = '#430606';
	var yellow = document.getElementById('old_price1');
	yellow.style.color = '#ffc601';
	var backImg = document.getElementById('wallpaper');
	backImg.style.backgroundImage = imgArr[0];
}
function HideBackElement1() {
	var backgroung = document.getElementById('price1');
	backgroung.style.backgroundImage = background_empty;
	var red = document.getElementById('under_price1');
	red.style.color = '#cd5d5d';
	var yellow = document.getElementById('old_price1');
	yellow.style.color = '#ff8d06';
	var backImg = document.getElementById('wallpaper');
	backImg.style.backgroundImage = imgArr[0];
}
function ShowBackElement2() {
	var backgroung = document.getElementById('price2');
	backgroung.style.backgroundImage = background;
	var red = document.getElementById('under_price2');
	red.style.color = '#430606';
	var yellow = document.getElementById('old_price2');
	yellow.style.color = '#ffc601';
	var backImg = document.getElementById('wallpaper');
	backImg.style.backgroundImage = imgArr[1];
}
function HideBackElement2() {
	var backgroung = document.getElementById('price2');
	backgroung.style.backgroundImage = background_empty;
	var red = document.getElementById('under_price2');
	red.style.color = '#cd5d5d';
	var yellow = document.getElementById('old_price2');
	yellow.style.color = '#ff8d06';
	var backImg = document.getElementById('wallpaper');
	backImg.style.backgroundImage = imgArr[0];
}
function ShowBackElement3() {
	var backgroung = document.getElementById('price3');
	backgroung.style.backgroundImage = background;
	var red = document.getElementById('under_price3');
	red.style.color = '#430606';
	var yellow = document.getElementById('old_price3');
	yellow.style.color = '#ffc601';
	var backImg = document.getElementById('wallpaper');
	backImg.style.backgroundImage = imgArr[2];
}
function HideBackElement3() {
	var backgroung = document.getElementById('price3');
	backgroung.style.backgroundImage = background_empty;
	var red = document.getElementById('under_price3');
	red.style.color = '#cd5d5d';
	var yellow = document.getElementById('old_price3');
	yellow.style.color = '#ff8d06';
	var backImg = document.getElementById('wallpaper');
	backImg.style.backgroundImage = imgArr[0];
}
function ShowBackElement4() {
	var backgroung = document.getElementById('price4');
	backgroung.style.backgroundImage = background;
	var red = document.getElementById('under_price4');
	red.style.color = '#430606';
	var yellow = document.getElementById('old_price4');
	yellow.style.color = '#ffc601';
	var backImg = document.getElementById('wallpaper');
	backImg.style.backgroundImage = imgArr[3];
}
function HideBackElement4() {
	var backgroung = document.getElementById('price4');
	backgroung.style.backgroundImage = background_empty;
	var red = document.getElementById('under_price4');
	red.style.color = '#cd5d5d';
	var yellow = document.getElementById('old_price4');
	yellow.style.color = '#ff8d06';
	var backImg = document.getElementById('wallpaper');
	backImg.style.backgroundImage = imgArr[0];
}


В HTML:
<script type="text/javascript" src="js/wallpaper.js"></script>
<script type="text/javascript">
	window.onload = function() {
		Wallpaper();
	}
</script>
Ответить с цитированием
  #2 (permalink)  
Старый 20.07.2011, 15:09
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

Используйте переменные и классы CSS)
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
  #3 (permalink)  
Старый 20.07.2011, 15:25
Аватар для Ankh
Новичок на форуме
Отправить личное сообщение для Ankh Посмотреть профиль Найти все сообщения от Ankh
 
Регистрация: 20.07.2011
Сообщений: 9

Спасибо, за желание помочь. Если появится свободное время - опишите, пожалуйста, по-подробнее... Или пример какой...
Ответить с цитированием
  #4 (permalink)  
Старый 20.07.2011, 15:57
Профессор
Отправить личное сообщение для ваый Посмотреть профиль Найти все сообщения от ваый
 
Регистрация: 29.06.2011
Сообщений: 445

вместо десятка одинаковых функций сделайте одну для начала:
вместо ShowBackElement1, ShowBackElement2, ...
function ShowBackElement(i) {
    var backgroung = document.getElementById('price' + i);
    backgroung.style.backgroundImage = background;
    
    var red = document.getElementById('under_price' + i);
    red.className = 'class2'; // '#430606';

    var yellow = document.getElementById('old_price' + i);
    yellow.className = 'class3'; // color = '#ffc601';

    var backImg = document.getElementById('wallpaper');
    backImg.style.backgroundImage = imgArr[i];
}
HideBackElement(i) по аналогии
function Wallpaper() {
    for (var i=1; i<5; i++) {
        var element1 = document.getElementById('price' + i);
        element1.onmouseover = function() {
            ShowBackElement(i);
        };
        element1.onmouseout = function() {
            HideBackElement(i);
        };
    }
}
но даже так - это отвратительно. но это нормально, вы ж учитесь
Ответить с цитированием
  #5 (permalink)  
Старый 20.07.2011, 16:03
Профессор
Отправить личное сообщение для Sweet Посмотреть профиль Найти все сообщения от Sweet
 
Регистрация: 16.03.2010
Сообщений: 1,618

Во-первых, в функции Wallpaper необходимо абстрагироваться от коливества элементов. Например, так:
function Wallpaper() {
  for(var i = 0, l = arguments.length, element; i < l; i++){
    element = document.getElementById( arguments[ i ] );
    if( !element ) continue;
    element.onmouseover = ShowBackElement;
    element.onmouseout = HideBackElement;
  };
};

Wallpaper('price1', 'price2', 'price3', 'price4')
Во-вторых, сделай абстрактные функции ShowBackElement и HideBackElement.
Ответить с цитированием
  #6 (permalink)  
Старый 20.07.2011, 16:15
Аватар для Ankh
Новичок на форуме
Отправить личное сообщение для Ankh Посмотреть профиль Найти все сообщения от Ankh
 
Регистрация: 20.07.2011
Сообщений: 9

Оу... Спасибо!
Ответить с цитированием
  #7 (permalink)  
Старый 21.07.2011, 01:19
Аватар для Ankh
Новичок на форуме
Отправить личное сообщение для Ankh Посмотреть профиль Найти все сообщения от Ankh
 
Регистрация: 20.07.2011
Сообщений: 9

Печально, но всплыла другая проблема: при наведении на любой из первых трех элементов - JS расценивает как наведение на элемент 4. При наведении на 4 элемент не происходит ничего. Код:
// JavaScript Document
var imgArr = ["url('./img/pic_0.png')","url('./img/pic_1.png')","url('./img/pic_2.png')","url('./img/pic_3.png')","url('./img/pic_4.png')"];
var background = "url('./img/podlojka.png')";
var background_empty = "url('./img/podlojka_empty.png')";

function Wallpaper() {
	for (var i=1; i<4; i++) {
	  var element = document.getElementById('price'+i);
	  element.onmouseover = function() {
		  ShowBackElement(i);
	  }
	  element.onmouseout = function() {
		  HideBackElement(i);
	  }
	}
}

function ShowBackElement(i) {
	var backgr = document.getElementById('price'+i);
	backgr.style.backgroundImage = background;
	var red = document.getElementById('under_price'+i);
	red.style.color = '#430606';
	var yellow = document.getElementById('old_price'+i);
	yellow.style.color = '#ffc601';
	var backImg = document.getElementById('wallpaper');
	backImg.style.backgroundImage = imgArr[i-1];
}
function HideBackElement(i) {
	var backgr = document.getElementById('price'+i);
	backgr.style.backgroundImage = background_empty;
	var red = document.getElementById('under_price'+i);
	red.style.color = '#cd5d5d';
	var yellow = document.getElementById('old_price'+i);
	yellow.style.color = '#ff8d06';
	var backImg = document.getElementById('wallpaper');
	backImg.style.backgroundImage = imgArr[0];
}
Ответить с цитированием
  #8 (permalink)  
Старый 21.07.2011, 01:31
Профессор
Отправить личное сообщение для Sweet Посмотреть профиль Найти все сообщения от Sweet
 
Регистрация: 16.03.2010
Сообщений: 1,618

Пример ошибочного использования
Ответить с цитированием
  #9 (permalink)  
Старый 21.07.2011, 01:56
Аватар для Ankh
Новичок на форуме
Отправить личное сообщение для Ankh Посмотреть профиль Найти все сообщения от Ankh
 
Регистрация: 20.07.2011
Сообщений: 9

Sweet, спасибо Вам огромное!
Ответить с цитированием
  #10 (permalink)  
Старый 21.07.2011, 02:09
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,484

только замыкания тут не нужны, как и 2 разных функции show/hide.
__________________
29375, 35
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Открытие div блока при первом визите на сайт Nushaba Общие вопросы Javascript 28 20.12.2013 21:24
Как сделать паузу в цикле for? ILL-JAH Общие вопросы Javascript 21 25.10.2011 14:27
UI Dialog как победить двойной вызов??? xela1980 jQuery 3 19.12.2009 11:51
как просмотреть все подобъекты объекта egg Я не знаю javascript 10 01.06.2009 20:14
как разпринтить все существующие переменные scuter Общие вопросы Javascript 11 22.04.2008 14:53