Пыха тебя найдет

Добро пожаловать на Пыху!

Логин:
Пароль:
 

Нет прописки? Зарегистрируйся!

Новости

Мы в твиттере!
Мы вконтакте!
Мы на яндексе!

Краснодарское время: 24 Май, 2012, 11:30:57

Страниц: [1]
Печать
Автор Тема: jquery атрибут class  (Прочитано 312 раз)
0 Пользователей и 2 Гостей смотрят эту тему.
Professor    ↓ 
16 Сентябрь, 2010, 03:16:45
НЕ ХУЕТА! ХУЕТА!

Группа: Адекваты

Карма: 30
Сообщений: 2074
Сила слова: 1.45

сделал выпадающий список категория.
около каждой категории плюсик, при  нажатии на который раскрывается категория а плюсик становится минусом, а при сворачивании категории опять становится плюсом.
HTML

<div id="content-block">
<ul>
 <li><div class="plus" id="0"></div>категория 1
  <ul class="category-list-0">
   <li>под категория 1
   </li>
  </ul>
 </li>
 <li><div class="plus" id="1"></div>категория 2
  <ul class="category-list-1">
   <li>под категория 2
   </li>
  </ul>
 </li>
</ul>
</div>
 

все нормально работает, но вот сделать кнопочку "открыть/закрыть" все категории не получается. Проблемы в изменении плюсов на минусы
 
Javascript

$(document).ready(function(){
/*меняем плюс/минус и открываем/закрываем блок*/
    $(".plus").click(function(){
        $(".category-list-"+$(this).attr("id")).toggle();
        $(this).toggleClass('minus');
    });
/*открываем/закрываем все категории*/
    $("#check-all").toggle(function(){
  
        $("#content-block ul").each(function () {
            $(".plus").addClass("minus");//вот так не получается
            $(this).show();
        });
    
    }, function() {
        $(".category-list-1 ul").each(function () {
            $(".plus").addClass("plus");//вот так не получается
            $(this).hide();
        });
    });
 
});
 

как сделать так что бы объекту присвоился один класс, а потом другой, и при этом $(this).toggleClass('minus'); тоже работал??
Записан

Записки профессора : Кто тут, к примеру, в цари крайний? Никого?! Так я первый буду!
Stasovsky    ↓ 
16 Сентябрь, 2010, 04:23:14 , спустя 1 час 6 минут 29 секунд
НЕ ХУЕТА! ХУЕТА!

Сенсей XD
Группа: Джедаи

Карма: 54
Сообщений: 3653
Сила слова: 1.48

чет ты там намутил с айдишниками и category-list-0 )) не айс))
вот намалевал примитивчик
HTML
<span class="openall">Open all</span>
 
<ul id="categories">
    <li>Category 1
        <ul>
            <li>Category 1.1</li>
            <li>Category 1.2</li>
            <li>Category 1.3
                <ul>
                    <li>Category 1.1.1</li>
                    <li>Category 1.1.2</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Category 2</li>
    <li>Category 3
        <ul>
            <li>Category 3.1</li>
            <li>Category 3.2</li>
        </ul>
    </li>
    <li>Category 4</li>
</ul>

Javascript
$('#categories li:has(ul)').addClass('plus');
 
$('#categories li').toggle(function() {
    var t = $(this);
   
    $('>ul', t).css({display: 'block'});
    t.removeClass('plus').addClass('minus');
}, function() {
    var t = $(this);
   
    $('>ul', t).css({display: 'none'});
    t.removeClass('minus').addClass('plus');
});
 
$('.openall').toggle(function() {
    var t = $(this),
        ul = $('#categories');
       
    t.text('Close all');
    $('li:has(ul)', ul).removeClass('plus').addClass('minus');
    $('li>ul', ul).css({display: 'block'});
}, function() {
    var t = $(this),
        ul = $('#categories');
       
    t.text('Open all');
    $('li:has(ul)', ul).removeClass('minus').addClass('plus');
    $('li>ul', ul).css({display: 'none'});
});

тут пример - http://keyx.narod.ru/001.htm
 
а по сабжу - $(".plus").removeAttr('class').addClass("minus"), но с toggleClass будет проблема, так как он выполняет первое действие, потом второй и ему пох, что там уже выполнено первое... нужно мутить с проверкой if ( hasClass('minus') ) addClass('plus'), или что-нить в этом роде))
Записан
Professor    ↓ 
16 Сентябрь, 2010, 04:56:53 , спустя 33 минуты 39 секунд
НЕ ХУЕТА! ХУЕТА!

Группа: Адекваты

Карма: 30
Сообщений: 2074
Сила слова: 1.45

ууу как у тебя все сложно =)
не
Javascript
removeClass('minus').addClass('plus');
не вариант
немножко по другому подошел к проблеме
 
Javascript
    $("#check-all").toggle(function(){
        $(this).html("закрыть все");
        $("#content-block .plus").each(function () {
            var categoryBlock=$("ul.category-list-"+$(this).attr("id"));
            if($(this).hasClass("plus")){
                categoryBlock.show();
                $(this).toggleClass('minus');
            }
        });
   
    }, function() {
    $(this).html("открыть все");
        $(".category-list-1 .plus").each(function () {
            var categoryBlock=$(".category-list-"+$(this).attr("id"));
 
            if($(this).hasClass("minus")){
                categoryBlock.hide();
                $(this).toggleClass('minus');
            }
        });
    });
до этого я перебирал се блоки ul и менял от этого + на - или наоборот.
А теперь я обхожу все + и - и в зависимости от этого меняю видимость блоков
Записан

Записки профессора : Кто тут, к примеру, в цари крайний? Никого?! Так я первый буду!
Professor    ↓ 
16 Сентябрь, 2010, 05:10:19 , спустя 13 минут 26 секунд
НЕ ХУЕТА! ХУЕТА!

Группа: Адекваты

Карма: 30
Сообщений: 2074
Сила слова: 1.45

До кучи, Как проверить display:none ?
Записан

Записки профессора : Кто тут, к примеру, в цари крайний? Никого?! Так я первый буду!
mario    ↓ 
16 Сентябрь, 2010, 05:26:22 , спустя 16 минут 3 секунды
НЕ ХУЕТА! ХУЕТА!

wazzup
Группа: Джедаи

Карма: 67
Сообщений: 6162
Сила слова: 1.09


До кучи, Как проверить display:none ?
.show, .hidden
Записан

с ув. mario.
Контакты
Stasovsky    ↓ 
16 Сентябрь, 2010, 05:36:37 , спустя 10 минут 15 секунд
НЕ ХУЕТА! ХУЕТА!

Сенсей XD
Группа: Джедаи

Карма: 54
Сообщений: 3653
Сила слова: 1.48

Javascript
$(".category-list-1 .plus")
он один такой))
 
Javascript
$("#content-block .plus").each...
это и есть каждый плюс, зачем ты проверяешь это $(this).hasClass("plus") ?)))
Записан
Nyaah    ↓ 
16 Сентябрь, 2010, 08:02:55 , спустя 2 часа 26 минут 18 секунд
НЕ ХУЕТА! ХУЕТА!

Группа: Джедаи

Карма: 34
Сообщений: 521
Сила слова: 6.53

До кучи, Как проверить display:none ?
jQuery('to many selectors:visible');
jQuery('to many selectors:not(:visible)');
Записан

Work, buy, consume, die
Ёл    ↓ 
16 Сентябрь, 2010, 10:42:38 , спустя 2 часа 39 минут 43 секунды
НЕ ХУЕТА! ХУЕТА!


Карма: 3
Сообщений: 48
Сила слова: 6.25

Javascript
if($(this).css('display') == 'none')
{
   alert('display:none');
}

=D
Записан
Страниц: [1]
Печать
 

Перейти в:  

Этот топик скрыли: adw0rd