ФорумПрограммированиеJavaScript → jquery атрибут class

jquery атрибут class

  • Professor

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

    Spritz 16 сентября 2010 г. 7: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 Группа: Джедаи

    Spritz 16 сентября 2010 г. 8: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 Группа: Адекваты

    Spritz 16 сентября 2010 г. 8: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 Группа: Адекваты

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

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

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

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


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

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

    Spritz 16 сентября 2010 г. 9:36, спустя 10 минут 15 секунд

    $(".category-list-1 .plus")

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

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

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

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

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

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

    jQuery('to many selectors:visible');
    jQuery('to many selectors:not(:visible)');
    Work, buy, consume, die
  • Ёл

    Сообщения: 48 Репутация: N Группа: Кто попало

    Spritz 16 сентября 2010 г. 14:42, спустя 2 часа 39 минут 43 секунды

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


    =D

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