Una vez que se hace clic en la Lista, la clase "activa" se agregará a la lista. Y una vez que se agregue la clase "activa", quiero almacenar los valores (valor de datos y filtro de datos) para filtrar obj.
Problema: la clase "activa" se agrega al hacer clic. En el segundo clic, puedo obtener el valor de la clase activa => en la que se hizo clic anteriormente, no en el mismo clic. ¿Como puedó resolver esté problema?
$(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 como fue diseñado:
Suponiendo que UL tiene class="sidebar-filter", delegue y asigne
$(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()
.netuce((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>