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');*/
});
});
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<ul>
<li class="thread-filter filter-items " data-filter="network" data-value="9">
<a href="#">name</a>
</li>
<li class="thread-filter filter-items " data-filter="network" data-value="1">
<a href="#">name</a>
</li>
<li class="thread-filter filter-items " data-filter="network" data-value="2">
<a href="#">name</a>
</li>
</ul>
<ul>
<li class="thread-filter filter-items " data-filter="signal" data-value="9">
<a href="#">name</a>
</li>
<li class="thread-filter filter-items " data-filter="signal" data-value="1">
<a href="#">name</a>
</li>
<li class="thread-filter filter-items " data-filter="signal" data-value="2">
<a href="#">name</a>
</li>
</ul>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 }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<ul class="sidebar-filter">
<li class="thread-filter filter-items" data-filter="network" data-value="1">
<a href="#">name</a>
</li>
<li class="thread-filter filter-items" data-filter="network" data-value="2">
<a href="#">name</a>
</li>
<li class="thread-filter filter-items" data-filter="network" data-value="3">
<a href="#">name</a>
</li>
</ul>
<ul class="sidebar-filter">
<li class="thread-filter filter-items" data-filter="signal" data-value="4">
<a href="#">name</a>
</li>
<li class="thread-filter filter-items" data-filter="signal" data-value="5">
<a href="#">name</a>
</li>
<li class="thread-filter filter-items" data-filter="signal" data-value="6">
<a href="#">name</a>
</li>
</ul>