主页 / 问题 / 1011685
Accepted
Игорь
Asked:2020-08-09 14:13:44 +0000 UTC2020-08-09 14:13:44 +0000 UTC

选择上一个被点击的项目

  • 772

让我解释一下整体情况。按类别有这样的过滤器。通过单击这些元素中的每一个，带有搜索结果的按钮会出现在最后一个选定元素的对面。可以选择或取消选择类别，在这种情况下，按钮应转到先前选择的列表项。

问题： 是否有可能以某种方式确定这个先前选择的列表项？

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>

javascript

3 个回答

  1. 也许你需要这样的东西？

    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>

    Ps 没有必要存储点击的 - 类本身可以切换

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

    和所有）没有任何条件。

    Ps-2 关于点击元素的数量...

    $('.list li a').index( $(this) );这种情况下将给出在所有找到的列表 li a... 中单击 this 的数量...（或者 this-parent-siblings-bubble ）然后您可以获得相同的数字并按数字获取所需的元素，$('.list li a').eq( номер )

    • 2

  2. 因为 是在标签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>

    • 1
  3. Best Answer

    选定过滤器的历史存储在对象的链接列表中：

        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>

    • 0

相关问题