Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Работа с DOM (https://javascript.ru/forum/misc/21198-rabota-s-dom.html)

systemiv 01.09.2011 01:48
Работа с DOM
 
Уже 2 часа ночи, а завтра 1 сентября, надо в инст идти=)

Помогите правильно организовать работу функции, у меня чувство что здесь всё на костылях.
Функция должна при нажатии на стрелочку, увеличивать и цену, которая указана у товара.
Вот html:
<div class="oneItem" id="product_1">
				<div class="imageItem"></div>
				<div class="infoItem">
					<p>Цена:&nbsp;<span class="priceItem">44.34</span>руб.</p>
					<span>
						Кол-во:&nbsp;
						<span class="rateItem" id="rateDown" onclick="rateDown();">&#9668;</span>
						<input type="text" id="rateInput" value="1" />
						<span class="rateItem" id="rateUp" onclick="rateUp();">&#9658;</span>
					</span>
					<input type="submit" id="submiItem" value="Добавить в корзину" />
				</div>
			</div>

Вот, как то так. Вот так я разруливаю вопрос с DOM:
function rateUp(){
	var input = document.getElementById('rateInput');
	var price = document.getElementById('product_1');
	var price = price.lastElementChild.firstElementChild.firstElementChild;
	input.value++;
	price.innerHTML = priceStart.innerHTML * input.value;
}


Два вопроса, как убрать костыль с путешествием через всё дерево, пока в голову лезет мысль, добавить не ИД, а класс, ко всем элементам, для простоты поиска

И второй вопрос, как мне отловить стартовую цену?
Сейчас функция работает некоректно, и увеличивается в геометричесской прогрессии.
Мне нужно как то сохранить цену в переменную, и оставить её там, в голову лезет только проверка, 1 товар в корзине или нет, если 1, то записать его значение в переменную, если не один, то оставить как было.

Очень важно Ваше мнение!

monolithed 01.09.2011 08:43
как вариант:
<form name="form">
    <input type="button" value="up" />
    <b id="b"> 0 </b>
    <input type="button" value="dn" />
<form>

<script>
window.onload = function() {
    var form = document.form.elements, i = form.length, j = 0;
    while(i--) {
        form[i].onclick = function(i) {
            return function() {
                document.getElementById('b').innerHTML = i ? ++j : --j;
            };
        }(i);
    }
};
</script>


допилите сами

devote 01.09.2011 08:48 
<div class="oneItem" id="product_1"> 
    <div class="imageItem"></div> 
    <div class="infoItem"> 
        <p>Цена:&nbsp;<span class="priceItem">44.34</span>руб.</p> 
        <span> 
            Кол-во:&nbsp; 
            <span class="rateItem" onclick="rateChange( 1, 1 );">◄</span> 
            <input class="rateInput" type="text" value="1" />
            <input class="priceForOne" type="hidden" value="44.34" />
            <span class="rateItem" onclick="rateChange( 1, 0 );">►</span> 
        </span> 
        <input type="submit" value="Добавить в корзину" /> 
    </div> 
</div>
<div class="oneItem" id="product_2"> 
    <div class="imageItem"></div> 
    <div class="infoItem"> 
        <p>Цена:&nbsp;<span class="priceItem">68.30</span>руб.</p> 
        <span> 
            Кол-во:&nbsp; 
            <span class="rateItem" onclick="rateChange( 2, 1 );">◄</span> 
            <input class="rateInput" type="text" value="2" />
            <input class="priceForOne" type="hidden" value="34.15" />
            <span class="rateItem" onclick="rateChange( 2, 0 );">►</span> 
        </span> 
        <input type="submit" value="Добавить в корзину" /> 
    </div> 
</div>

<script type="text/javascript">
function getElemsByClass( className, context ) {

	var nodeList = [];
	context = context || document;

	if ( context.getElementsByClassName ) {
		nodeList = Array.prototype.slice.call(
			context.getElementsByClassName( className )
		);
	} else {
		var elems = context.getElementsByTagName("*"),
			classMatch = new RegExp('(?:^| +)' + className + '(?: +|$)');

		for( var elem, i = 0 ; elem = elems[ i ]; i++ ) {
			if ( classMatch.test( elem.className ) ) {
				nodeList.push( elem );
			}
		}
	}

	return nodeList;
}

function rateChange( product_id, type ) {
	var product = document.getElementById( 'product_' + product_id );
		rateInput = getElemsByClass( 'rateInput', product ),
		priceForOne = getElemsByClass( 'priceForOne', product ),
		priceItem = getElemsByClass( 'priceItem', product ),
		count = parseInt( rateInput[ 0 ].value ),
		price = parseFloat( priceForOne[ 0 ].value );

	count = type == 0 ? ++count : --count;
	rateInput[ 0 ].value = count;
	priceItem[ 0 ].innerHTML = ( price * count ).toFixed( 2 );
}

</script>

crayday 01.09.2011 09:01
Чем id не устраивает? В любом случае, в этом коде уже используется id #rateInput, так что введение ещё одного id картину не испортит. Если же заменять id на класс, то заменять и в этом месте. Идея с тем, чтобы искать по id или классу, разумеется, верная, и если таких предметов будет несколько, то, да, подходит класс.

По поводу начального значения, тут есть два пути:
1. По загрузке dom загонять начальное значение в переменную, оно там будет спокойно дожидаться своего часа славы.
2. Если предметов несколько, не выводить вообще суммарную цену экземпляров одного типа товара, а выводить её в поле "итого" для всех типов товаров.

Также имеет смысл вынести код заполнения поля суммарной стоимости в отдельную функцию и привязать её в качестве обработчика события change поля #rateInput.

Также напоминаю, что при клике по стрелочкам в обработчик в качестве this передаётся элемент этой самой стрелочки (в общем, то, по чему кликнули), поэтому можно плясать от неё и её родителей (второй её родитель - это уже .infoItem, ну а третий - .oneItem), а не обращаться жестко по id.

systemiv 01.09.2011 11:48
А вот мелькнула такая мысль, ДОМ дерево у меня будет строится и пришедшего JSON объекта, что если из того же объекта и брать данные?


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