JavaScript функция для всех элементов страницы

o_nix · 29 Ноя 2010

Есть функция обрабатывающая только первый элемент на странице
суть её в том что в зависимости от того кликали на элемент ранее или нет она показывает либо скрывает пункт

PHP:

function notepadCurId()
{
	var elm = document.getElementById('notepad_link');
	if (!elm)
	{
		return false;
	}
	elm = elm.onclick.toString();
	var tmp = 'notepadAdd(';
	elm = elm.substring(elm.indexOf(tmp) + tmp.length, elm.length);
	elm = elm.substring(0, elm.indexOf(')'));
	return parseInt(elm);
}

У меня таких элементов на странице список - тоесть от 1 до 20 шт
изменил функцию след образом.

PHP:

function notepadCurId()
{
	var elm = document.getElementsById('notepad_link');
	for(var i=0;i<elm.length;i++) {
	if (!elm)
	{
		return false;
	}
	elm = elm.onclick.toString();
	var tmp = 'notepadAdd(';
	elm = elm.substring(elm.indexOf(tmp) + tmp.length, elm.length);
	elm = elm.substring(0, elm.indexOf(')'));
	return parseInt(elm);
}
	}

тоесть добавил цикл перебора всех элементов, но чтото неработает.
Где я ошибся ?

latteo · 29 Ноя 2010

id разве не уникальны должны быть для всех элементов?
здесь стоит по document.getElementsByTagName перебирать элементы, ну и обращаться к ним надо по

PHP:

elm[i]

Phrack · 29 Ноя 2010

не совсем понимаю, что вы хотите сделать. Аккордеон?

Насколько я понимаю, у вас несколько ошибок:
1. id уникальный на странице (w3c)
2. вы используете несуществующую функцию. Правильная - getElementById() (w3c)
3. Отсюда следующие ошибки.

смотрите в сторону jquery

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

o_nix · 29 Ноя 2010

i просто забыл поставить в примере
дело не в этом оказывается нет в js getElementsById
есть только getElementById
тоесть по id нельзя получить массив выполнив одну команду
это можно сделать только мо имени
хз как всё переделывать ...

это не аккордеон - добавление товаров в корзину
если товар уже был добавлен в корзину то кнопка добавить изменяется на кнопку удалить.

alica · 29 Ноя 2010

o_nix написал(а):
i просто забыл поставить в примере
дело не в этом оказывается нет в js getElementsById
есть только getElementById
тоесть по id нельзя получить массив выполнив одну команду
это можно сделать только мо имени
хз как всё переделывать ...
это не аккордеон - добавление товаров в корзину
если товар уже был добавлен в корзину то кнопка добавить изменяется на кнопку удалить.

Используйте Для просмотра ссылки Войди или Зарегистрируйся JQuery, через него получите массив нужных элементов, а там с ними можно манипулировать как хочешь.

latteo · 29 Ноя 2010

выложи побольше кода - быстрее помогут
на основе имеющегося участка не удалось мне логику функции угадать - потому просто подсказал как пройтись по всем элементам можно

o_nix · 29 Ноя 2010

html страничка
просто скопировать код в html файл и запустить
Только первый элемент меняется с добавить на удалить все остальные элементы что ниже не реагируют
Инфа о том добавлен элемент в корзину или нет хранится куке notepad
там хранится номер товара который добавлен в корзину

PHP:

<!DOCTYPE html>
<html>
<head>
<div id="fixed-div" align="center">
<span id="notepad_empty"></span>
<div id="notepad_full" style="background: yellow">( <span id="notepad_num">0</span> ) <a class="maincat" href="notepad.php">Корзина</a></div>
<br><br>
</div>
  <script type="text/javascript" language="JavaScript">

  function textCounter (field, countfield, maxlimit)

  {

  	if (field.value.length > maxlimit)

  	field.value = field.value.substring(0, maxlimit);

  	else

  	countfield.value = maxlimit - field.value.length;

  }

  function newWindow (mypage,myname,w,h,features)

  {

  	if(screen.width)

  	{

  		var winl = (screen.width-w)/2;
  		var wint = (screen.height-h)/2;

  	}

  	else

  	{

  		winl = 0;wint =0;

  	}

  	if (winl < 0) winl = 0;
  	if (wint < 0) wint = 0;

  	var settings = 'height=' + h + ',';
  	settings += 'width=' + w + ',';
  	settings += 'top=' + wint + ',';
  	settings += 'left=' + winl + ',';
  	settings += features;
  	settings += ' scrollbars=yes ';

  	win = window.open(mypage,myname,settings);

  	win.window.focus();

  }

function checkemail (emailStr) 
{
var checkTLD=1;
var knownDomsPat=/^(com|net|org|edu|int|mil|gov|arpa|biz|aero|name|coop|info|pro|museum)$/;
var emailPat=/^(.+)@(.+)$/;
var specialChars="\\(\\)><@,;:\\\\\\\"\\.\\[\\]";
var validChars="\[^\\s" + specialChars + "\]";
var quotedUser="(\"[^\"]*\")";
var ipDomainPat=/^\[(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})\]$/;
var atom=validChars + '+';
var word="(" + atom + "|" + quotedUser + ")";
var userPat=new RegExp("^" + word + "(\\." + word + ")*$");
var domainPat=new RegExp("^" + atom + "(\\." + atom +")*$");
var matchArray=emailStr.match(emailPat);

if (matchArray==null) 
{
alert("E-mail адрес введен неправильно");
return false;
}
var user=matchArray[1];
var domain=matchArray[2];

for (i=0; i<user.length; i++) {
if (user.charCodeAt(i)>127) {
alert("E-mail адрес введен неправильно");
return false;
   }
}
for (i=0; i<domain.length; i++) {
if (domain.charCodeAt(i)>127) {
alert("E-mail адрес введен неправильно");
return false;
   }
}

if (user.match(userPat)==null) 
{
alert("E-mail адрес введен неправильно");
return false;
}

var IPArray=domain.match(ipDomainPat);
if (IPArray!=null) {

for (var i=1;i<=4;i++) {
if (IPArray[i]>255) {
alert("E-mail адрес введен неправильно");
return false;
   }
}
return true;
}

var atomPat=new RegExp("^" + atom + "$");
var domArr=domain.split(".");
var len=domArr.length;
for (i=0;i<len;i++) {
if (domArr[i].search(atomPat)==-1) {
alert("E-mail адрес введен неправильно");
return false;
   }
}

if (checkTLD && domArr[domArr.length-1].length!=2 && 
domArr[domArr.length-1].search(knownDomsPat)==-1) {
alert("E-mail адрес введен неправильно");
return false;
}

if (len<2) {
alert("E-mail адрес введен неправильно");
return false;
}

return true;
}

var notepad_max=20;
		var notepad_time=1293622127;
function notepadCurId()
{
	var elm = document.getElementById('notepad_link');

	if (!elm)
	{
		return false;
	}

	elm = elm.onclick.toString();
	var tmp = 'notepadAdd(';

	elm = elm.substring(elm.indexOf(tmp) + tmp.length, elm.length);
	elm = elm.substring(0, elm.indexOf(')'));

	return parseInt(elm);
}

function notepadGet()
{
	var data = '', saver = 'notepad=', cookie = '' + unescape(document.cookie);
	var offset = cookie.indexOf(saver);

	if (offset != -1)
	{
		var end = cookie.indexOf(';', offset);
		if (end == -1)
		{
			end = cookie.length;
		}

		data = cookie.substring(offset + saver.length, end);
	}

	return data;
}

function notepadInit()
{
	var data = notepadGet();
	var total = 0, p = data.length, off = 0;
	var cur_date = new Date();

	while (p != -1)
	{
		off = p;
		if (++total > notepad_max)
		{
			data = data.substring(off + 1, data.length);
			--total;
		}

		p = data.lastIndexOf(',', --off);
	}

	cur_date.setTime(cur_date.getTime() + notepad_time * 1000);
	document.cookie = 'notepad=' + data + '; expires=' + cur_date.toGMTString();

	if ( !document.getElementById('notepad_empty') )
	{
		return;
	}

	if (data == '')
	{
		document.getElementById('notepad_empty').style.display = '';
		document.getElementById('notepad_full').style.display = 'none';
	}
	else
	{
		p = document.getElementById('notepad_num');
		p.replaceChild(document.createTextNode(total), p.firstChild);

		document.getElementById('notepad_empty').style.display = 'none';
		document.getElementById('notepad_full').style.display = '';
	}

	if ( !document.getElementById('notepad_link') )
	{
		return;
	}

	data += ',';
	p = notepadCurId();
	if (p && data.indexOf(p + ',') != -1)
	{
		document.getElementById('notepad_link').style.display = 'none';
		document.getElementById('notepad_link_del').style.display = '';
	}
	else
	{
		document.getElementById('notepad_link').style.display = '';
		document.getElementById('notepad_link_del').style.display = 'none';
	}
}


function notepadAdd(num)
{
	num = parseInt(num);
	if (num <= 0)
	{
		return false;
	}

	var data = notepadGet();
	var cur_date = new Date();

	if (data != '')
	{
		data = ',' + data + ',';
	}

	if (data.indexOf(',' + num + ',') == -1)
	{
		cur_date.setTime(cur_date.getTime() + notepad_time * 1000);
		document.cookie = 'notepad=' + data.substring(1, data.length) + num
			+ '; expires=' + cur_date.toGMTString();
		notepadInit();
	}

	return false;
}

function notepadDel(num)
{
	num = parseInt(num);
	if (num <= 0)
	{
		return false;
	}

	var data = notepadGet();
	var cur_date = new Date();

	if (data != '')
	{
		data = ',' + data + ',';
	}

	if (data.indexOf(',' + num + ',') != -1)
	{
		cur_date.setTime(cur_date.getTime() + notepad_time * 1000);
		data = data.replace(num + ',', '');
		data = (data == ',' ? '' : data.substring(1, data.length - 1));

		document.cookie = 'notepad=' + data	+ '; expires=' + cur_date.toGMTString();
		notepadInit();
	}

	return false;
}

</script>
</head>
<body>
<TD>
  <DIV align="center" >
    <B>[1]</B>
     
    <A href="index.php?catalog=23&offset=10" >[2]</A>
     
    <A href="index.php?catalog=23&offset=20" >[3]</A>
     
    <A href="index.php?catalog=23&offset=30" >[4]</A>
     
    <A href="index.php?catalog=23&offset=40" >[5]</A>
     
    <A href="index.php?catalog=23&offset=50" >[6]</A>
     ... 
    <A href="index.php?catalog=23&offset=140" >[15]</A>
     
    <A href="index.php?catalog=23&offset=10" >[след]</A>
  </DIV>
  <DIV style="PADDING-LEFT: 16px;" >
    <TABLE width="100%" >
      <TBODY>
        <TR valign="top" >
          <TD>
            <TABLE cellspacing="10"  width="100%" >
              <TBODY>
                <TR height="1"  bgcolor="#cccccc" >
                  <TD colspan="2" ></TD>
                </TR>
                <P>
                  Сортировать по: 
                  <A href="index.php?catalog=23&order=1" >[Наименованию]</A>
                   
                  <A href="index.php?catalog=23&order=2" >[Цене]</A>
                </P>
                <TR valign="top" >
                  <TD width="1%" >
                    <A href="index.php?item=1110" >
                      <IMG border="0"  src="getpic.php?id=1110"  alt="Сейф AIKO ASK-25"  width="100"  height="100" >
                    </A>
                  </TD>
                  <TD>
                    <P>
                      <A href="index.php?item=1110" >Сейф AIKO ASK-25</A>
                    </P>
                    <DIV>
                      <FONT>
                        Цена: 
                        <B>5 026.00 р</B>
                      </FONT>
                      <BR>
                      <FONT class="foundin" >
                        Найдено в 
                        <B>1</B>
                         магазине
                      </FONT>
                      <BR>
                      <A href="index.php?item=1110" >
                        <FONT class="compr" >Перейти на страницу с описанием</FONT>
                      </A>
                    </DIV>
                    <A href="./index.php?item=1110"  onclick="return notepadAdd(1110)"  id="notepad_link" >Добавить</A>
                    <A href="./index.php?item=1110"  onclick="return notepadDel(1110)"  id="notepad_link_del"  style="display: none" >Удалить</A>
                  </TD>
                </TR>
                <TR>
                  <TD colspan="2" >Выс. 250,шир.360, гл. 310 Ключевой замок, 1 полка, вес 40 кг, объем 14 л. Устойчивость к взлому 1 класс</TD>
                </TR>
                <TR height="1"  bgcolor="#cccccc" >
                  <TD colspan="2" ></TD>
                </TR>
                <TR valign="top" >
                  <TD width="1%" >
                    <A href="index.php?item=1111" >
                      <IMG border="0"  src="getpic.php?id=1111"  alt="Сейф AIKO ASK-30"  width="100"  height="100" >
                    </A>
                  </TD>
                  <TD>
                    <P>
                      <A href="index.php?item=1111" >Сейф AIKO ASK-30</A>
                    </P>
                    <DIV>
                      <FONT>
                        Цена: 
                        <B>5 975.00 р</B>
                      </FONT>
                      <BR>
                      <FONT class="foundin" >
                        Найдено в 
                        <B>1</B>
                         магазине
                      </FONT>
                      <BR>
                      <A href="index.php?item=1111" >
                        <FONT class="compr" >Перейти на страницу с описанием</FONT>
                      </A>
                    </DIV>
                    <A href="./index.php?item=1111"  onclick="return notepadAdd(1111)"  id="notepad_link" >Добавить</A>
                    <A href="./index.php?item=1111"  onclick="return notepadDel(1111)"  id="notepad_link_del"  style="display: none" >Удалить</A>
                  </TD>
                </TR>
                <TR>
                  <TD colspan="2" >Выс. 300,шир.444, гл. 380 Ключевой замок, 1 полка, вес 63 кг, объем 29 л . Устойчивость к взлому 1 класс</TD>
                </TR>
                <TR height="1"  bgcolor="#cccccc" >
                  <TD colspan="2" ></TD>
                </TR>
                <TR valign="top" >
                  <TD width="1%" >
                    <A href="index.php?item=1112" >
                      <IMG border="0"  src="getpic.php?id=1112"  alt="Сейф AIKO ASK-30 EL"  width="100"  height="100" >
                    </A>
                  </TD>
                  <TD>
                    <P>
                      <A href="index.php?item=1112" >Сейф AIKO ASK-30 EL</A>
                    </P>
                    <DIV>
                      <FONT>
                        Цена: 
                        <B>8 826.00 р</B>
                      </FONT>
                      <BR>
                      <FONT class="foundin" >
                        Найдено в 
                        <B>1</B>
                         магазине
                      </FONT>
                      <BR>
                      <A href="index.php?item=1112" >
                        <FONT class="compr" >Перейти на страницу с описанием</FONT>
                      </A>
                    </DIV>
                    <A href="./index.php?item=1112"  onclick="return notepadAdd(1112)"  id="notepad_link" >Добавить</A>
                    <A href="./index.php?item=1112"  onclick="return notepadDel(1112)"  id="notepad_link_del"  style="display: none" >Удалить</A>
                  </TD>
                </TR>
                <TR>
                  <TD colspan="2" >Выс. 300,шир.444, гл. 406 электр. Код. замок, 1 полка, вес 63 кг, объем 29 л . Устойчивость к взлому 1 класс</TD>
                </TR>
                <TR height="1"  bgcolor="#cccccc" >
                  <TD colspan="2" ></TD>
                </TR>
                <TR valign="top" >
                  <TD width="1%" >
                    <A href="index.php?item=1113" >
                      <IMG border="0"  src="getpic.php?id=1113"  alt="Сейф AIKO ASK-67T"  width="100"  height="100" >
                    </A>
                  </TD>
                </TR>
                <TR>
                  <TD colspan="2" >Выс. 250,шир.340, гл. 280 Ключевой замок, вес 10кг, объем 17л</TD>
                </TR>
                <TR height="1"  bgcolor="#cccccc" >
                  <TD colspan="2" ></TD>
                </TR>
              </TBODY>
            </TABLE>
          </TD>
        </TR>
      </TBODY>
    </TABLE>
  </DIV>
  <DIV align="center" >
    <B>[1]</B>
     
    <A href="index.php?catalog=23&offset=10" >[2]</A>
     
    <A href="index.php?catalog=23&offset=20" >[3]</A>
     
    <A href="index.php?catalog=23&offset=30" >[4]</A>
     
    <A href="index.php?catalog=23&offset=40" >[5]</A>
     
    <A href="index.php?catalog=23&offset=50" >[6]</A>
     ... 
    <A href="index.php?catalog=23&offset=140" >[15]</A>
     
    <A href="index.php?catalog=23&offset=10" >[след]</A>
  </DIV>
</TD>

</body>
</html>

Phrack · 29 Ноя 2010

PHP:

	$(document).ready(function(){
		$('.notepad_link').click(function(){
			notepadAdd($(this).attr('id'));
			$(this).hide();
			$(this).next().show();
		});
	})

попробуйте такой скрипт. Для этого необходимо будет чуть чуть изменить ваш код:

Код:

<A href="./index.php?item=1111"  onclick="return notepadAdd(1111)"  id="notepad_link" >Добавить</A>

меняем на

Код:

<A href="./index.php?item=1111"  onclick="return notepadAdd(1111)"  class="notepad_link" id="1111">Добавить</A>

и для notepad_link_del делаем аналогично. В css прописать display:none для notepad_link_del. Удачи

ПС.делал в слепую, могут быть ошибки.
ПС2. естественно нужен jquery

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

alica · 29 Ноя 2010

2o_nix
Весь прикол здесь в том, что у Вас все функции по ID заточены, да так, что они вызываются всегда заново, вот он и находит самый первый, дальше ему зачем находить если он условия все выполняет при первом ?
Используйте this, необходимо наследование в рамкам DOM объекта и тогда неважно что ID будет одинаковый. Переделать notepadInit(), на notepadInit(var) и от туда уже плясать.

Xata6 · 5 Янв 2011

JavaScript функция для всех элементов страницы

o_nix

Хранитель порядка

latteo

Эффективное использование PHP, MySQL

Phrack

Профессор

o_nix

Хранитель порядка

alica

Гуру форума

latteo

Эффективное использование PHP, MySQL

o_nix

Хранитель порядка

Phrack

Профессор

alica

Гуру форума

Xata6

Постоялец