Cuando hago clic en el enlace para "id2", ejecuta la función de filtro para cada enlace, terminando con "id5" como la lista filtrada visible en mi página.
<script> window.onload = function() { var a = document.getElementById("id1"); var b = document.getElementById("id2"); var c = document.getElementById("id3"); var d = document.getElementById("id4"); var e = document.getElementById("id5"); var x = document.getElementsByClassName("className") a.onclick = filter(a.id); b.onclick = filter(b.id); c.onclick = filter(c.id); d.onclick = filter(d.id); e.onclick = filter(e.id); function filter(tag) { for (var i = 0; i < x.length; i++) if (tag === "view all") { x[i].style.display = "block"; } else { if (tag.toLowerCase() === x[i].getAttribute('alt').toLowerCase()) x[i].style.display = "block"; else x[i].style.display = "none"; } return false; } }La parte superior donde he configurado mis enlaces aparece de la siguiente manera:
<a href="" id="id1" rel="history" class="active">View All</a> <a href="" id="id2" class="active">ID 2</a> <a href="" id="id3" class="active">ID 3</a> <a href="" id="id4" class="active">ID 4</a> <a href="" id="id5" class="active">ID 5</a>El filtro funciona correctamente, ¡el único problema es que está ejecutando la función para todos los enlaces!
Gracias por adelantado por la ayuda.
Lo que sucede es que sus funciones se ejecutan tan pronto como intenta asignar el controlador de eventos. Cualquier función con (); después de que se ejecute.
Puede usar el concepto de cierres y devolver una nueva función. Use un contenedor de función que devuelva una nueva función para cada una de sus etiquetas.
a.onclick = filter(a.id); b.onclick = filter(b.id); c.onclick = filter(c.id); d.onclick = filter(d.id); e.onclick = filter(e.id); function filterWrapper(tag) { var tagValue = tag; return function filter() { let tag = tagValue; for (var i = 0; i < x.length; i++) if (tag === "view all") { x[i].style.display = "block"; } else { if (tag.toLowerCase() === x[i].getAttribute('alt').toLowerCase()) x[i].style.display = "block"; else x[i].style.display = "none"; } return false; } } } Obviamente, podría haber obtenido el valor del atributo id dentro de la función misma. this controlador de eventos interno pertenece al propio elemento.
a.onclick = filter; b.onclick = filter; c.onclick = filter; d.onclick = filter; e.onclick = filter; function filter() { let tag = this.getAttribute('id'); for (var i = 0; i < x.length; i++) if (tag === "view all") { x[i].style.display = "block"; } else { if (tag.toLowerCase() === x[i].getAttribute('alt').toLowerCase()) x[i].style.display = "block"; else x[i].style.display = "none"; } return false; } }