1

Объясню для ситуации в целом. Есть такой себе фильтр по категориям. По клику на каждый из этих элементов напротив последнего выбранного появляется кнопка с результатами поиска. Категорию можно как выбрать, так и снять, и в таком случае кнопка должна уходить к предыдущему выбранному элемент списка.

Вопрос: Возможно ли каким-то образом определять этот предыдущий выбранный элемент списка?

function categories() {
  var categoriesItem = $('.list li a');
      
  categoriesItem.on('click', function(e) {
    e.preventDefault();
    
    var currentCategoriesItem = $(this);
    
    // Определение выбранных эл-тов
    if (currentCategoriesItem.hasClass('active')) {
      currentCategoriesItem.removeClass('active');
    } else {
      currentCategoriesItem.addClass('active');
    }
  });
}

categories();
.list li a.active {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list">
  <li><a href="#close">Яблоки</a></li>
  <li><a href="#close">Бананы</a></li>
  <li><a href="#close">Груши</a></li>
  <li><a href="#close">Апельсины</a></li>
</ul>

5
  • 1
    а что мешает завести переменную в которой сохранять предыдущее значение?
    – Bald
    9 авг 2019 в 6:22
  • спасибо за подсказку. Так и сделаю, не подумал
    – Игорь
    9 авг 2019 в 6:25
  • @Bald, а как выбрать именно предыдущее значение?
    – Игорь
    9 авг 2019 в 7:10
  • 2
    что значит выбрать?! обновите код в задаче
    – Bald
    9 авг 2019 в 7:36
  • Укажите в коде комментарием то место, где вам нужно получить предыдущий элемент.
    – user256824
    9 авг 2019 в 8:22

3 ответа 3

2

Может вам нужно что-то около такого?

var items = []; // Массив для хранения последовательности всего кликнутого

$('.list li a').on('click', function(e) {
  e.preventDefault();
    
  var bubu = $(this);
  if( bubu.hasClass('active') ){
    bubu.removeClass('active');
    
    var length = bubu.parent().siblings().length; 
    // у вас класс, а не id, поэтому не рискнул $('.list li a').length
    items.push( bubu.text() ); 
    // Для демо в массив сохраняется текст элемента, но можно хоть весь элемент
    // или его номер, что разумнее
    items = items.slice( -length-1 ); //Каждый раз массив обрезается с конца.
  } else {
    bubu.addClass('active');
  }

  console.clear(); console.log( items );
});
.list li a.active {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="list">
  <li><a href="#close">Яблоки</a></li>
  <li><a href="#close">Бананы</a></li>
  <li><a href="#close">Груши</a></li>
  <li><a href="#close">Апельсины</a></li>
</ul>

P.s. не было бы необходимости хранить кликнутое - сам класс можно было переключать

$(this).toggleClass('active');

И всё) Без всяких условий.

P.s.-2 про номер кликнутого элемента...

$('.list li a').index( $(this) ); это дело выдаст номер кликнутого this среди всех найденных list li a... ( ну или this-parent-siblings-блабла ) А потом можно достать этот же номер и получить нужный элемент по номеру, $('.list li a').eq( номер )

2
  • почему у вас добавляется элемент только при снятии клика? И подсвечиваются все элементы, а не последний
    – ThisMan
    9 авг 2019 в 11:27
  • @ThisMan судя по комментариям под ответом Сырка... задача вроде сводится к сохранению последовательности кликов куда-нибудь. 9 авг 2019 в 11:37
1

Т.к. в метках стоит jQuery, то напишу весь код на нём.

// т.к. при клике мы добавляем класс, то по классу и будет использовать все проверки.

// создадим переменную с названием класса, чтобы немного упростить себе жизнь :D
let active = 'active';

$('.list').on('click', 'li', function(){
  // по клику на `li` выполняем следующее:
  // проверяем, у дочернего `a`, нажатого `li`, недолжно быть класса `active`
  if(!$(this).find('a').hasClass(active)) {
    // убираем класс у `li a.active`
    $('.list').find('li a.'+active).removeClass(active);
    // добавляем класс дочернему `a`, нажатого `li`
    $(this).find('a').addClass(active);
  }
});
.list li a.active {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="list">
  <li><a href="#close">Яблоки</a></li>
  <li><a href="#close">Бананы</a></li>
  <li><a href="#close">Груши</a></li>
  <li><a href="#close">Апельсины</a></li>
</ul>

3
  • @CblPoK2513, спасибо за ответ, но вопрос немного в другой плоскости. Во-первых, в списке может быть одновременно выбрано несколько вариантов. Во-вторых - при снятии активности у какого-либо пункта списка, нужно поставить какой-то класс для элемента, который был выбран перед этим. В этом и есть трудность для меня.
    – Игорь
    9 авг 2019 в 8:21
  • Прошлый выбранный элемент будет один или их может быть несколько?
    – De.Minov
    9 авг 2019 в 9:56
  • может быть только один
    – Игорь
    9 авг 2019 в 10:01
0

История выбранных фильтров хранится в связанном списке объектов:

    function categories() {
        var categoriesItem = $('.list li a');
        var state = {cur: [], prev: undefined};
        categoriesItem.on('click', function(e) {
        e.preventDefault();
        if ($(this).hasClass('active')) {                            
          var e = $(this).data('c'); 
          var c = state.cur.slice();
          if (state.cur[0] == $(this).data('c')) {     
            state = state.prev;
            state.cur = c.filter(function (n) {
                return state.cur.indexOf(n) !== -1 && n != e;
            });
          } else {
            var c = state.cur.filter(function (v) {
              return v != e;
            });
            state = {
              cur : c.filter(function (v) {
                return v != e;
              }),
              prev : state.prev
            }; 
          }
          if (state.cur.length === 0) {
            state = {cur: [], prev: undefined};
          }
        } else {
          var c = state.cur.slice();
          c.unshift($(this).data('c'));
          state = {cur : c, prev : state};     
        }
        $(".-result").remove();
        $('.list li a.active').removeClass('active');
        var result = 0;
        $.each(state.cur, function (k, v) {
          var e = $("a[data-c=" + v + "]");
          result = result + $(e).data('res');
          $(e).addClass('active');
        });
         if (!!state.cur[0]) $("a[data-c=" + state.cur[0] + "]").parent().append('<button class="-result">Результат: ' + result + '</button>'); 
      });
    }

    categories();
.list li a.active {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list">
  <li><a href="#close" data-c="1" data-res="3">Яблоки</a></li>
  <li><a href="#close" data-c="2" data-res="8">Бананы</a></li>
  <li><a href="#close" data-c="3" data-res="5">Груши</a></li>
  <li><a href="#close" data-c="4" data-res="1">Апельсины</a></li>
</ul>

8
  • если нажать на элемент и он единственный выбранный то он остается выбранным 9 авг 2019 в 10:59
  • @JurijJazdanov, не могу воспроизвести
    – Jigius
    9 авг 2019 в 11:08
  • не совсем правильно я сказал, дело не в последнем. Попробуй кликать в такой последовательности яблоки - апельсины - бананы - груши - бананы - груши. 9 авг 2019 в 11:15
  • @JurijJazdanov, Я считаю, что работает правильно. Выбрать "яблоки - апельсины - бананы - груши" . Далее убрать из выбора "Бананы", но показывать кнопку-результат на последнем активированном пункте "Груши" . Если деактивировать "Груши", то по условию автора вопроса, - возвращается предыдущее состояние(которое было перед активацией "Груши") с выбором - "яблоки - апельсины - бананы - груши".
    – Jigius
    9 авг 2019 в 11:38
  • Накликиваем по пунктам - добавляем в историю. Деактивируем последний из активированных - выталкиваем состояние из истории.
    – Jigius
    9 авг 2019 в 11:46

Ваш ответ

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

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