How to access value of clicked object after click event in JQuery/Javascript?

Question

Once the List is clicked, "active" class will be added to the list.. And once the class "active" is added, I want to store the values ( data-value and data-filter) to filter obj.

Problem: "active" class is added on click. On second click I can get the value of previously clicked => active class, not on same click. How can I solve this problem?

$(document).ready(function() {
  $('.sidebar-filter').on('click', function(event) {
    /**$('.sidebar-filter').addClass("active");*/
    event.preventDefault();
    var filterobj = {};
    $(".sidebar-filter").each(function(index, ele) {
      var filterval = $(this).data("value");
      var filterkey = $(this).data('filter');
      // ('li[data-filter=' + filterkey+'].active')).map(function(el){
      filterobj[filterkey] = Array.from(document.querySelectorAll('li[data-filter=' + filterkey + '].active')).map(function(el) {
        /**return $(el).data("value");*/
        return $(el).data("value")
        /** return el.getAttribute('data-value');*/
      });
    });
  });
});



  
    name
  
  
    name
  
  
    name
  



  
    name
  
  
    name
  
  
    name

mplungjan · Answer

Use jQuery as it was designed:

Assuming the UL has the class="sidebar-filter", then delegate and map

$(function() {
    $('.filter-items').on('click', function(event) {
    event.preventDefault();
    $(this).toggleClass("active");
    const filterobj = $(".filter-items.active").map(function() {
      return { value: $(this).data("value"), filterKey: $(this).data('filter') }
    })
    .get()
    .reduce((acc,cur) => {
      const key = cur.filterKey;
      if (acc[key]) acc[key].push(cur.value)
      else acc[key] = [cur.value];
      return acc
    },
    {})
    console.log(filterobj);
  });
});

li a { text-decoration: none }
li.active a { text-decoration: underline }



  
    name
  
  
    name
  
  
    name
  


  
    name
  
  
    name
  
  
    name

How to access value of clicked object after click event in JQuery/Javascript?

1 Answers