jquery атрибут class

Сообщения: 2089 Репутация: N Группа: Адекваты

16 сентября 2010 г. 15:16

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


<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>

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


$(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'); тоже работал??

technobulka

Сообщения: 4540 Репутация: N Группа: Джедаи

16 сентября 2010 г. 16:23, спустя 1 час 6 минут 29 секунд

чет ты там намутил с айдишниками и category-list-0 )) не айс))
вот намалевал примитивчик

<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>

$('#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

Сообщения: 2089 Репутация: N Группа: Адекваты

16 сентября 2010 г. 16:56, спустя 33 минуты 39 секунд

ууу как у тебя все сложно =)
не

removeClass('minus').addClass('plus');

не вариант
немножко по другому подошел к проблеме

    $("#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

Сообщения: 2089 Репутация: N Группа: Адекваты

16 сентября 2010 г. 17:10, спустя 13 минут 26 секунд

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

Сообщения: 6067 Репутация: N Группа: Джедаи

16 сентября 2010 г. 17:26, спустя 16 минут 3 секунды

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

Сообщения: 4540 Репутация: N Группа: Джедаи
16 сентября 2010 г. 17:36, спустя 10 минут 15 секунд
$(".category-list-1 .plus")

он один такой))

$("#content-block .plus").each…

это и есть каждый плюс, зачем ты проверяешь это $(this).hasClass("plus") ?)))
Высокоуровневое абстрактное говно
Nyaah

Сообщения: 574 Репутация: N Группа: Джедаи

16 сентября 2010 г. 20:02, спустя 2 часа 26 минут 18 секунд

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

jQuery('to many selectors:visible');
jQuery('to many selectors:not(:visible)');

Work, buy, consume, die
Ёл

Сообщения: 48 Репутация: N Группа: Кто попало
16 сентября 2010 г. 22:42, спустя 2 часа 39 минут 43 секунды
if($(this).css('display') == 'none') { alert('display:none'); }

=D

Пожалуйста, авторизуйтесь, чтобы написать комментарий!

jquery атрибут class

Войти