Получить предыдущее значение атрибута data- у выбранной ранее ссылки

168

27 апреля 2019, 19:00

Пытаюсь получить предыдущее значение data-type у выбранной ранее ссылки (.selected) при клике по новой. Знаю, как реализовать с input, но со списком не получается сделать. Подскажите, пожалуйста, как можно это реализовать.

$('.cd-gallery-container').each(function(){ 
  var $this = $(this); 
  var filter_list_container = $this.children('.cd-filter'), 
      filter_values = filter_list_container.find('li:not(.placeholder) a'); 
   
  filter_list_container.find('li').on('click', function(event){ 
    event.preventDefault(); 
    var selected_filter = $(event.target).data('type'); 
    //добавить класс, выбранной ссылке 
    filter_values.removeClass('selected'); 
    $(event.target).addClass('selected'); 
    console.log(selected_filter);             
  }); 
});

.selected{ 
  color:red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="cd-gallery-container">   
  <nav class="cd-filter"> 
      <ul>        
          <li> 
              <a class="selected" data-type="all" href="#0">Все</a> 
          </li> 
          <li> 
              <a data-type="1" href="#0">1</a> 
          </li> 
          <li> 
              <a data-type="2" href="#0">2</a> 
          </li> 
          <li> 
              <a data-type="3" href="#0">3</a> 
          </li> 
      </ul> 
  </nav> 
</div>

Answer 1

$('.cd-gallery-container').each(function(){ 
  var $this = $(this); 
  var filter_list_container = $this.children('.cd-filter'), 
      filter_values = filter_list_container.find('li:not(.placeholder) a'); 
   
  filter_list_container.find('li').on('click', function(event){ 
    event.preventDefault(); 
    var selected_filter = $(event.target).data('type'); 
 
    //сначала узнаем предыдущую .selected, а потом уже добавляем к новой 
    var prev = filter_list_container.find('li:not(.placeholder) a.selected').data('type'); 
    console.log("prev", prev); 
 
    //добавить класс, выбранной ссылке 
    filter_values.removeClass('selected'); 
    $(event.target).addClass('selected'); 
    console.log("current", selected_filter);             
  }); 
});

.selected { 
  color:red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="cd-gallery-container">   
  <nav class="cd-filter"> 
      <ul>        
          <li> 
              <a class="selected" data-type="all" href="#0">Все</a> 
          </li> 
          <li> 
              <a data-type="1" href="#0">1</a> 
          </li> 
          <li> 
              <a data-type="2" href="#0">2</a> 
          </li> 
          <li> 
              <a data-type="3" href="#0">3</a> 
          </li> 
      </ul> 
  </nav> 
</div>