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

jquery атрибут class

  • Professor

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

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

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

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


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


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

    });


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

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

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

    чет ты там намутил с айдишниками и category-list-0 )) не айс))
    вот намалевал примитивчик
    <span class=&quot;openall&quot;>Open all</span>

    <ul id=&quot;categories&quot;>
    <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>


    $(&#39;#categories li:has(ul)&#39;).addClass(&#39;plus&#39;);

    $(&#39;#categories li&#39;).toggle(function() {
    var t = $(this);

    $(&#39;>ul&#39;, t).css({display: &#39;block&#39;});
    t.removeClass(&#39;plus&#39;).addClass(&#39;minus&#39;);
    }, function() {
    var t = $(this);

    $(&#39;>ul&#39;, t).css({display: &#39;none&#39;});
    t.removeClass(&#39;minus&#39;).addClass(&#39;plus&#39;);
    });

    $(&#39;.openall&#39;).toggle(function() {
    var t = $(this),
    ul = $(&#39;#categories&#39;);

    t.text(&#39;Close all&#39;);
    $(&#39;li:has(ul)&#39;, ul).removeClass(&#39;plus&#39;).addClass(&#39;minus&#39;);
    $(&#39;li>ul&#39;, ul).css({display: &#39;block&#39;});
    }, function() {
    var t = $(this),
    ul = $(&#39;#categories&#39;);

    t.text(&#39;Open all&#39;);
    $(&#39;li:has(ul)&#39;, ul).removeClass(&#39;minus&#39;).addClass(&#39;plus&#39;);
    $(&#39;li>ul&#39;, ul).css({display: &#39;none&#39;});
    });


    тут пример - http://keyx.narod.ru/001.htm

    а по сабжу - $(&quot;.plus&quot;).removeAttr(&#39;class&#39;).addClass(&quot;minus&quot;), но с toggleClass будет проблема, так как он выполняет первое действие, потом второй и ему пох, что там уже выполнено первое… нужно мутить с проверкой if ( hasClass(&#39;minus&#39;) ) addClass(&#39;plus&#39;), или что-нить в этом роде))
    Высокоуровневое абстрактное говно
  • Professor

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

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

    ууу как у тебя все сложно =)
    не
    removeClass(&#39;minus&#39;).addClass(&#39;plus&#39;);
    не вариант
    немножко по другому подошел к проблеме

        $(&quot;#check-all&quot;).toggle(function(){
    $(this).html(&quot;закрыть все&quot;);
    $(&quot;#content-block .plus&quot;).each(function () {
    var categoryBlock=$(&quot;ul.category-list-&quot;+$(this).attr(&quot;id&quot;));
    if($(this).hasClass(&quot;plus&quot;)){
    categoryBlock.show();
    $(this).toggleClass(&#39;minus&#39;);
    }
    });

    }, function() {
    $(this).html(&quot;открыть все&quot;);
    $(&quot;.category-list-1 .plus&quot;).each(function () {
    var categoryBlock=$(&quot;.category-list-&quot;+$(this).attr(&quot;id&quot;));

    if($(this).hasClass(&quot;minus&quot;)){
    categoryBlock.hide();
    $(this).toggleClass(&#39;minus&#39;);
    }
    });
    });

    до этого я перебирал се блоки ul и менял от этого + на - или наоборот.
    А теперь я обхожу все + и - и в зависимости от этого меняю видимость блоков
  • Professor

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

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

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

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

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


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

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

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

    $(&quot;.category-list-1 .plus&quot;)

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

    $(&quot;#content-block .plus&quot;).each…

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

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

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

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

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

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

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

    if($(this).css(&#39;display&#39;) == &#39;none&#39;)
    {
    alert(&#39;display:none&#39;);
    }


    =D

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