Не добавляется значение атрибута (класс к элементу)

Тема в разделе "JavaScript", создана пользователем danneo, 3 янв 2014.

Модераторы: ZiX
  1. danneo

    danneo Честный

    Регистр.:
    13 ноя 2007
    Сообщения:
    1.453
    Симпатии:
    113
    Есть код:
    HTML:
    <ul class="cat_list_level_2">
    <li><label><input type="checkbox" name="cat_id_all[]" value="1" disabled="disabled"> Обследование УЗИ (2-1)  </label></li>
    <li>
    <ul class="cat_list_level_3">
    <li><label><input type="checkbox" name="cat_id_all[]" value="4"> Узи брюшной полости (3-4)  </label></li>
    <li><label class=""><input type="checkbox" name="cat_id_all[]" value="6"> Узи сосудов (3-6)  </label></li>
    <li><label class=""><input type="checkbox" name="cat_id_all[]" value="5"> Узи сосудов шеи (3-5)  </label></li>
    </ul>
    </li>
    <li><label class=""><input type="checkbox" name="cat_id_all[]" value="2"> Обследование ФГДС (2-2)  </label></li>
    </ul>
    Пишу jquery код:
    Код:
    $('.block_services_types div label').on('click' , function(){
        $(this).toggleClass('active_label') ;
    
    })
    Как видно в html, атрибут "class" добавляется, но пустой.
    Что за ерунда такая?
     
    Последнее редактирование: 3 янв 2014
  2. Шумадан

    Шумадан Хабарра!!11

    Регистр.:
    6 фев 2008
    Сообщения:
    1.728
    Симпатии:
    2.105
    попробуйте этот пример
    Код:
    <html>
    <body>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
    <script>
    $(document).ready(function () {
    $('#test label').on('click' , function()
    {
        $(this).toggleClass('active_label') ;
    });
    });
    </script>
    <div id='test'>
        <label class='test'><input type="checkbox" name="cat_id_all[]" value="4">Smth</label>
    </div>
    </body>
    </html>
    обратите внимание, что обработчик цепляется после загрузки документа и jquery selector использует нотацию 'id тип элемента', хотя можно попробовать просто по типу элемента.
     
  3. danneo

    danneo Честный

    Регистр.:
    13 ноя 2007
    Сообщения:
    1.453
    Симпатии:
    113
    а в чем разница с моим примером? Насколько я понял, только в том, что у вас вложенности списков нет. А мне же все равно придется делать все на вложенных списках.

    Мне кажется, что тут нужно смотреть в сторону "всплывающий пузырек" или как-то так. Потому-как, если добавить console.log( $(this) ), то выводиться сразу несколько раз один и тот же элемент.
    А если пишу так:
    Код:
    $('.block_services_types li').on('click',function(){
        console.log( $(this) );
    })
    то в консоле сразу 3-и раза объект пишется.
    Какая-то ерунда... :tut:
    хотя, решил задачу так:
    HTML:
    $('.block_services_types label input').on('click',function(){
                    $(this).parent().toggleClass('active_label') ;
                })
     
    Последнее редактирование: 3 янв 2014
    Шумадан нравится это.
  4. Шумадан

    Шумадан Хабарра!!11

    Регистр.:
    6 фев 2008
    Сообщения:
    1.728
    Симпатии:
    2.105
    разница в том, что в приведённом вами html куске невозможно выбрать
    Код:
    .block_services_types div label
    какой размер
    $('.block_services_types div label')?

    мой пример работает
     
  5. danneo

    danneo Честный

    Регистр.:
    13 ноя 2007
    Сообщения:
    1.453
    Симпатии:
    113
    На странице несколько таких вот блоков:
    HTML:
    <div class="block_services_types">
    <h3 class="name_types">Медицина</h3>
    <div class="body_services_types">
    <ul class="cat_list_level_1">
    <li><label><input type="checkbox" name="cat_id_all[]" value="3" disabled="disabled"> Лечение гастрита (1-3)  </label></li>
    <li>
    <ul class="cat_list_level_2">
    <li><label><input type="checkbox" name="cat_id_all[]" value="10"> Лечение гастрита народными методами (2-10)  </label></li>
    </ul>
    </li>
    <li><label><input type="checkbox" name="cat_id_all[]" value="7" disabled="disabled"> Диагностика (1-7)  </label></li>
    <li>
    <ul class="cat_list_level_2">
    <li><label><input type="checkbox" name="cat_id_all[]" value="1" disabled="disabled"> Обследование УЗИ (2-1)  </label></li>
    <li>
    <ul class="cat_list_level_3">
    <li><label><input type="checkbox" name="cat_id_all[]" value="4"> Узи брюшной полости (3-4)  </label></li>
    <li><label><input type="checkbox" name="cat_id_all[]" value="6"> Узи сосудов (3-6)  </label></li>
    <li><label><input type="checkbox" name="cat_id_all[]" value="5"> Узи сосудов шеи (3-5)  </label></li>
    </ul>
    </li>
    <li><label><input type="checkbox" name="cat_id_all[]" value="2"> Обследование ФГДС (2-2)  </label></li>
    </ul>
    </li>
    </ul>
    </div>
    </div>
     
    Шумадан нравится это.
  6. Шумадан

    Шумадан Хабарра!!11

    Регистр.:
    6 фев 2008
    Сообщения:
    1.728
    Симпатии:
    2.105
    теперь более понятно, попробуйте такой вариант
    вот этот код находит 8 элементов label и при клике присваивается аттрибут
    HTML:
    
    <html>
    <head>
       <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
       <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
       <script>
         $(document).ready(function () {
           $('.block_services_types div label').on('click' , function(event)
           {
            $(this).toggleClass('active_label') ;
            event.preventDefault();
           });
         });
       </script>
    </head>
    <body>
    <div class="block_services_types">
       <h3 class="name_types">Медицина</h3>
       <div class="body_services_types">
         <ul class="cat_list_level_1">
           <li><label><input type="checkbox" name="cat_id_all[]" value="3" disabled="disabled"> Лечение гастрита (1-3)  </label></li>
           <li>
             <ul class="cat_list_level_2">
               <li><label><input type="checkbox" name="cat_id_all[]" value="10"> Лечение гастрита народными методами (2-10)  </label></li>
             </ul>
           </li>
           <li><label><input type="checkbox" name="cat_id_all[]" value="7" disabled="disabled"> Диагностика (1-7)  </label></li>
           <li>
             <ul class="cat_list_level_2">
               <li><label><input type="checkbox" name="cat_id_all[]" value="1" disabled="disabled"> Обследование УЗИ (2-1)  </label></li>
               <li>
                 <ul class="cat_list_level_3">
                   <li><label><input type="checkbox" name="cat_id_all[]" value="4"> Узи брюшной полости (3-4)  </label></li>
                   <li><label><input type="checkbox" name="cat_id_all[]" value="6"> Узи сосудов (3-6)  </label></li>
                   <li><label><input type="checkbox" name="cat_id_all[]" value="5"> Узи сосудов шеи (3-5)  </label></li>
                 </ul>
               </li>
               <li><label><input type="checkbox" name="cat_id_all[]" value="2"> Обследование ФГДС (2-2)  </label></li>
             </ul>
           </li>
         </ul>
       </div>
    </div>
    </body>
    </html>
    
     
    danneo нравится это.