1

Есть две кнопки - Таблица и Список. Нажимаю на Таблица - объекты выводятся таблицей. Нажимаю на Список - выводятся списком.

Все это дело запоминается с помощью cookies.
Проблема в том, что когда cookies пусты, то объекты отображаются в виде таблицы (это правильно), но по умолчанию активная кнопка Список
Получается мне нужно сделать один лишний клик. т.е. нажать на Таблица, она станет активной, но ничего не изменится т.к. объекты отображаются уже таблицей. И только потом на Список

Нужно чтобы объекты отображались таблицей и кнопка Таблица тоже была активной (класс .active)

erb:

<ul class="nav">
  <li class="<%= 'active' if cookies['filter-product'] != 'buble' %>">
    <a class="nav-list" href="">item</a>
  </li>
  <li class="<%= 'active' if cookies['filter-product'] == 'buble' %>">
    <a class="nav-cols" href="">table</a>
  </li>
</ul>

<!-- container with items -->
<div class="infinite-table">
  <ul class="ctf--b-product-list <%= 'product-list-buble' unless cookies['filter-product'] == 'buble' %>">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>
</div>

js:

$(document).ready(function(event){
    $('.nav a').click(function() {
    if (!($(this).parent().hasClass('active')))
    {
        $('.nav li').removeClass('active');
        $(this).parent().addClass('active');
        if ($(this).hasClass('nav-cols'))
        {
          $.cookie('filter-product', 'buble');
          $('.ctf--b-product-list').addClass('product-list-buble');
        }
        else{
          $('.ctf--b-product-list').removeClass('product-list-buble');
          $.cookie('filter-product', 'non-buble');
        }
        return false;

    }
    else {
        return false;
    }
  });
});

css: (использую спрайты для кнопок Таблица и Список)

.nav { list-style:none; vertical-align:top; right:0; top:-50px; position:absolute; }
.nav li { float: left; padding:0 0 0 10px; }
.nav a { width:18px; height:18px; font-size:2em; line-height:0; display:block; }
.nav .active .nav-list { background-position:0 bottom; }
.nav .nav-cols { background-position:right 0; }
.nav .active .nav-cols { background-position:right bottom; }

или подскажите плагины для этих целей. Заранее спасибо.

2
  • Поменять таблицу и список местами
    – Spaider
    3 июл 2017 в 11:58
  • в erb это понятно, иконки поменются местами и отображаться будут правильно. Но логика не поменяется(кнопка Таблица будет выводить список). А вопрос скорее в js что поменять?
    – evans
    3 июл 2017 в 12:11

1 ответ 1

1

Наверное так, если нет элемента с классом active, применяем этот класс на родителя класса nav-cols: Можно еще объявить переменную в erb со значением из кук, и проверять если она есть то делать active исходя из условий, а если ее нет вообще то ставить active по умолчанию

$(document).ready(function(event){
    if ( $('.active').length === 0 ) {
       $('.nav-cols').parent().addClass('active')
    }
    $('.nav a').click(function() {
    if (!($(this).parent().hasClass('active')))
    {
        $('.nav li').removeClass('active');
        $(this).parent().addClass('active');
        if ($(this).hasClass('nav-cols'))
        {
          $.cookie('filter-product', 'buble');
          $('.ctf--b-product-list').addClass('product-list-buble');
        }
        else{
          $('.ctf--b-product-list').removeClass('product-list-buble');
          $.cookie('filter-product', 'non-buble');
        }
        return false;

    }
    else {
        return false;
    }
  });
});

<!-- container with items -->
<div class="infinite-table">
  <ul class="ctf--b-product-list <%= 'product-list-buble' unless cookies['filter-product'] == 'buble' %>">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>
</div>
4
  • по умолчанию класс .active стоит на nav-listerb это первый тэг li), а я хотел бы поставить его по умолчанию на nav-cols. Если честно, всю голову сломал)
    – evans
    4 июл 2017 в 7:21
  • я не могу понять где устанавливается класс .active по умолчанию
    – evans
    4 июл 2017 в 7:22
  • @dmitriy 2 3 и 4 строка в моем коде
    – Spaider
    5 июл 2017 в 7:37
  • да, спасибо. Это я понял. мне просто убрать нужно .active со списка. теперь эти кнопки обе активные. Поэтому и говорю, что не пойму где значение по умолчанию ставится
    – evans
    7 июл 2017 в 8:19

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.