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

D

danneo

Честный
Регистрация
13 Ноя 2007
Сообщения
1.527
Реакции
121
Есть код:
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" добавляется, но пустой.
Что за ерунда такая?
 
Последнее редактирование:
попробуйте этот пример
Код: 
<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 тип элемента', хотя можно попробовать просто по типу элемента.
 
Шумадан написал(а):
попробуйте этот пример
Код: 
<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 тип элемента', хотя можно попробовать просто по типу элемента.
Нажмите для раскрытия...
а в чем разница с моим примером? Насколько я понял, только в том, что у вас вложенности списков нет. А мне же все равно придется делать все на вложенных списках.

Мне кажется, что тут нужно смотреть в сторону "всплывающий пузырек" или как-то так. Потому-как, если добавить 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') ;
            })
 
Последнее редактирование:
разница в том, что в приведённом вами html куске невозможно выбрать
Код: 
.block_services_types div label
какой размер
$('.block_services_types div label')?

мой пример работает
 
На странице несколько таких вот блоков:
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>
 
теперь более понятно, попробуйте такой вариант
вот этот код находит 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>
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху