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

Тема в разделе "Другие языки", создана пользователем o_nix, 29 ноя 2010.

Модераторы: Цукер
  1. o_nix

    o_nix

    Регистр.:
    7 ноя 2007
    Сообщения:
    1.073
    Симпатии:
    1.037
    Есть функция обрабатывающая только первый элемент на странице
    суть её в том что в зависимости от того кликали на элемент ранее или нет она показывает либо скрывает пункт
    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.lengthelm.length);
        
    elm elm.substring(0elm.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.lengthelm.length);
        
    elm elm.substring(0elm.indexOf(')'));
        return 
    parseInt(elm);
    }
        }
    тоесть добавил цикл перебора всех элементов, но чтото неработает.
    Где я ошибся ?
     
  2. latteo

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

    Moderator
    Регистр.:
    28 фев 2008
    Сообщения:
    1.522
    Симпатии:
    1.375
    id разве не уникальны должны быть для всех элементов?
    здесь стоит по document.getElementsByTagName перебирать элементы, ну и обращаться к ним надо по
    PHP:
    elm[i]
     
  3. Phrack

    Phrack

    Регистр.:
    3 ноя 2010
    Сообщения:
    264
    Симпатии:
    38
    не совсем понимаю, что вы хотите сделать. Аккордеон?

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

    смотрите в сторону jquery
    http://anton.shevchuk.name/wp-demo/jquery-tutorials/accordion1.html
     
    o_nix нравится это.
  4. o_nix

    o_nix

    Регистр.:
    7 ноя 2007
    Сообщения:
    1.073
    Симпатии:
    1.037
    i просто забыл поставить в примере
    дело не в этом оказывается нет в js getElementsById
    есть только getElementById
    тоесть по id нельзя получить массив выполнив одну команду
    это можно сделать только мо имени
    хз как всё переделывать ... :(

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

    alica

    Регистр.:
    28 июл 2008
    Сообщения:
    243
    Симпатии:
    76

    Используйте Перейти по ссылке JQuery, через него получите массив нужных элементов, а там с ними можно манипулировать как хочешь.
     
    o_nix нравится это.
  6. latteo

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

    Moderator
    Регистр.:
    28 фев 2008
    Сообщения:
    1.522
    Симпатии:
    1.375
    выложи побольше кода - быстрее помогут
    на основе имеющегося участка не удалось мне логику функции угадать - потому просто подсказал как пройтись по всем элементам можно
     
  7. o_nix

    o_nix

    Регистр.:
    7 ноя 2007
    Сообщения:
    1.073
    Симпатии:
    1.037
    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> ) <class="maincat" href="notepad.php">Корзина</a></div>
    <
    br><br>
    </
    div>
      <
    script type="text/javascript" language="JavaScript">

      function 
    textCounter (fieldcountfieldmaxlimit)

      {

          if (
    field.value.length maxlimit)

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

          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 0winl 0;
          if (
    wint 0wint 0;

          var 
    settings 'height=' ',';
          
    settings += 'width=' ',';
          
    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=0i<user.lengthi++) {
    if (
    user.charCodeAt(i)>127) {
    alert("E-mail адрес введен неправильно");
    return 
    false;
       }
    }
    for (
    i=0i<domain.lengthi++) {
    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!=&& 
    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.lengthelm.length);
        
    elm elm.substring(0elm.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.lengthend);
        }

        return 
    data;
    }

    function 
    notepadInit()
    {
        var 
    data notepadGet();
        var 
    total 0data.lengthoff 0;
        var 
    cur_date = new Date();

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

            
    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
        {
            
    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 += ',';
        
    notepadCurId();
        if (
    && data.indexOf(',') != -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(1data.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(1data.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>
     
  8. Phrack

    Phrack

    Регистр.:
    3 ноя 2010
    Сообщения:
    264
    Симпатии:
    38
    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 jquery.com
     
  9. alica

    alica

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

    Xata6 Постоялец

    Регистр.:
    20 мар 2007
    Сообщения:
    84
    Симпатии:
    5
    function sh(obj){
    var mooo=document.getElementById(obj);
    if (mooo.style.display=='none'){mooo.style.display='block';}
    else if (mooo.style.display=='block'){mooo.style.display='none';}
    }//убрать элемент по ID

    function sh2(obj,num){
    for(i=1;i<=num;i++){
    var mooo=document.getElementById(obj+i);
    if (mooo){mooo.style.display='none';}
    }
    }//Убрать элемент по серии ID

    или юзай тогда Jquery по сбору всех элементов со страницы и загонях их в массив