[SOLUCIONADO] Ocultar elementos de una lista según su clase

turuleto69 · #1 (**permalink**) 17/02/2013, 06:54

Hola a todos.
Tengo una lista de elementos <li> bastante larga.
Cada uno de los elementos <li> tiene una o varias clases.
Un ejemplo sería algo así:

Código HTML:

<li class="clase1">Elemento1</li>
<li class="clase1 clase2">Elemento2</li>
<li class="clase1 clase3 clase4">Elemento3</li>
<li class="clase1 clase4">Elemento4</li>

Bien. Ahora necesito una especie de índice arriba de la lista con las diferentes clases, cada una con un Checkbox al lado. La idea es que por defecto todos los checkbox estén activados y se vean todos lo elementos. Cuando el usuario desactive un checkbox de una class en concreto, estos cambiarían a display:none para que se oculten.
Es decir quiero hacer una especie de filtro para que sea más fácil la búsqueda de elementos en dicha lista.

He encontrado muchos scritps del tipo document.getElementById pero eso no me solucionan nada ya que la mayoría de los elementos necesitan varias clases. Por lo que no puedo hacerlo con Id y debe ser con class.
Gracias un saludo, espero me puedan ayudar :)

emprear · #2 (**permalink**) 17/02/2013, 07:41

También existe
document.getElementsByClassName()

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title>
 
<script type="text/javascript">
//<![CDATA[
 
//versiones IE < 9
/*
window.onload=function(){
if (document.getElementsByClassName == undefined) {
    document.getElementsByClassName = function(className){
        var tieneClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
        var todosLosElementos = document.getElementsByTagName("*");
        var resultados = [];
        var elementos;
        for (var i = 0; (elementos = todosLosElementos[i]) != null; i++) {
            var elementoClase = elementos.className;
            if (elementoClase && elementoClase.indexOf(className) != -1 && tieneClassName.test(elementoClase))
                resultados.push(elementos);
        }
        return resultados;
    }
}
}
*/
 
function que_clases(){
var a = document.getElementsByClassName('a');
var b = document.getElementsByClassName('b');
var c = document.getElementsByClassName('c');
alert('texto de primer elemento con clase a = ' + a[0].innerHTML);
alert('texto de primer elemento con clase b = ' + b[0].innerHTML);
alert('texto de segundo elemento con clase c = ' +c[1].innerHTML);
}
//]]>
</script>
</head>
<body>
<div>
<span style="cursor: pointer;" onclick="que_clases();"><b>Verificar</b></span>
<p class="a b c">texto</p>
<p class="a c">texto 2</p>
<p class="a b">texto 3</p>
</div>
<div>
<pre>
 
&lt;p class=&quot;a b c&quot;&gt;texto&lt;/p&gt;
&lt;p class=&quot;a c&quot;&gt;texto 2&lt;/p&gt;
&lt;p class=&quot;a b&quot;&gt;texto 3&lt;/p&gt;
</pre>
</div>
</body>
</html>

Como la función devuelve un conjunto de elementos, vas a tener que recorrer el array con un for

SAludos

turuleto69 · #3 (**permalink**) 17/02/2013, 08:59

Muchísimas gracias por responder.
He probado su código pero no hace lo que yo pretendo que haga.
Estoy seguro de que con los conocimientos adecuados podría interpretar su respuesta para aplicarla a mi caso. Pero perdóneme, mis conocimientos de java son nulos prácticamente. Actualmente sólo entiendo con cierta soltura html y css.
Si pudiera ser más conciso aplicándolo a mi caso estaría enormemente agradecido.
Gracias de nuevo

emprear · #4 (**permalink**) 17/02/2013, 09:22

En primer lugar el nombre del lenguaje es javascript, no java.
En segundo, deberías mostrar como has implementado el código, aunque los resultados hayan sido fallidos,

Si has visto el uso de getElementById(), habrás observado que aqui la situación se complicad, dao que en tanto los id de un elemento deben de únicos, en este caso puede haber varios elementos con el mismo class, más aún el atributo class puede contener más de una clase definida, ej: class="a b c"

por lo tanto, asi como document.getElementById(elemento); te devuelve un único objeto,
var elementosconclase= document.getElementsByClassName('clase1');
ó
var elementosconclase = document.getElementsByClassName('clase1 clase2');
devuelven un conjunto ó array, por lo tanto deberás recorrer ese array e ir cambiando la propiedad, en este caso, display, de cada uno.

Hay otras alternativas pero basicamente tienen el mismo funcionamiento

te recomiendo la lectura de
http://help.dottoro.com/ljpxmhgp.php

SAludos

turuleto69 · #5 (**permalink**) 17/02/2013, 09:30

Hasta ahora esto es lo que tengo. Seguro que está hecho muy a lo bruto, pero es fruto de mi desconocimiento en la materia.
Espero que ahora se entienda mejor cuales son mis intenciones, a pesar de que seguramente el código no tenga mucho sentido.

Código HTML:

<html>

<html>

<head>

<style>

li{list-style:none;}
form{display:inline-block;}
</style>

<script>
<!--
function test1(){
if(document["FORM1"]["box"].checked){
document.getElementByClassName("clase1").style.display ="block"}
else{
document.getElementByClassName("clase1").style.display ="none"}
}
//-->
</script>
<script>
<!--
function test2(){
if(document["FORM2"]["box"].checked){
document.getElementByClassName("clase2").style.display ="block"}
else{
document.getElementByClassName("clase2").style.display ="none"}
}
//-->
</script>
<script>
<!--
function test3(){
if(document["FORM3"]["box"].checked){
document.getElementByClassName("clase3").style.display ="block"}
else{
document.getElementByClassName("clase3").style.display ="none"}
}
//-->
</script>
<script>
<!--
function test4(){
if(document["FORM4"]["box"].checked){
document.getElementByClassName("clase4").style.display ="block"}
else{
document.getElementByClassName("clase4").style.display ="none"}
}
//-->
</script>
<script>
<!--
function test5(){
if(document["FORM5"]["box"].checked){
document.getElementByClassName("clase5").style.display ="block"}
else{
document.getElementByClassName("clase5").style.display ="none"}
}
//-->
</script>

</head>
<boby>

<form name="FORM1"><input type="checkbox" name="box" checked="checked"
onclick ="test1()" /> Clase 1</form>

<form name="FORM2"><input type="checkbox" name="box" checked="checked"
onclick ="test2()" /> Clase 2</form>

<form name="FORM3"><input type="checkbox" name="box" checked="checked"
onclick ="test3()" /> Clase 3</form>

<form name="FORM4"><input type="checkbox" name="box" checked="checked"
onclick ="test4()" /> Clase 4</form>

<form name="FORM5"><input type="checkbox" name="box" checked="checked"
onclick ="test5()" /> Clase 5</form>

<div id="lista">

<li class="clase1 clase2">Elemento 1</li>
<li class="clase1 clase3 clase4">Elemento 2</li>
<li class="clase3 clase4">Elemento 3</li>
<li class="clase1 clase3">Elemento 4</li>
<li class="clase2 clase4 clase5">Elemento 5</li>
<li class="clase3">Elemento 6</li>

</div>

</body>
</html>

emprear · #6 (**permalink**) 17/02/2013, 09:55

Bueno, eso (y sin analizarlo) ya es un esfuerzo

, ahora mismo me tengo que ir, cuando vuelva lo reviso.

SAludos

turuleto69 · #7 (**permalink**) 17/02/2013, 10:07

De verdad, muchísimas gracias por tu tiempo.
Espero tu vuelta :)
P.D. estoy revisando el enlace que me pasaste de help.dottoro.com, muy interesante. Estoy viendo a ver qué puedo hacer con él.
Saludos

emprear · #8 (**permalink**) 17/02/2013, 14:06

He visto tu función(y tu html) y tiene muchas fallas, estas fallas las podemos dividir muy genericamente en 2

1. las de sintáxis
2. como implementar método, funciones y propiedades
pero si hay de las primeras ya no podrás evaluar las segundas

iniar el documento con
<html>

<html>
Está mal
<boby> NO existe, <body> si
getElementByClassName NO existe, getElementsByClassName sí, ves la diferencia?
Veas a las cosas que me refiero, eso es falta de atención, por lo tanto a partir de ahora que cada ejemplo que quieras hacer, usá como base:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>título</title>
<script type="text/javascript">
//<![CDATA[
// aqui tu script
//]]>
</script>
</head>
<body>
 
</body>
</html>

Ahora vamos a tu caso particular, voy directamente a mostrarte como resolverlo. Pero antes unas aclaraciones finales:
Javascript suele ofrecer a veces varias formas de resolver un problema, no te quedes con lo primero que te funcione, ni siquiera lo que yo te indique, siempre puede haber algo mejor.
Si querés aprender, tenés que conocer las herramientas primero, luego aplicarlas en función de un objetivo.
Vamos al punto, lo que querés no es precisamente fácil y tampoco estoy seguro de que objetivo cumple, da la sensación que estás utilizando las clases como quien filtra un texto (o realiza una búsqueda) usando etiquetas y no precisamente para aplicar estilos, bue, no sé , es un poco complejo.

el html quedaría asi

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Filtro x className</title>
<style type="text/css">
li{list-style:none;}
form{display:inline-block;}
</style>
<script type="text/javascript">
function boxes(laClase,t){
var cb = document.getElementsByName('box');
var lista = document.getElementsByClassName(laClase);
    for (e=0; e < cb.length; e++) {
        if(t.checked == false){
            for (var i=0; i<lista.length; i++) {
            //console.log(lista[i].className); // descomentar para verificar
            lista[i].style.display = 'none';
            }
        }else{
            for (var i=0; i<lista.length; i++) {
            //console.log(lista[i].className); // descomentar para verificar
            lista[i].style.display = 'block';
            }   
 
        }
    } 
}
</script>
</head>
<body>
<form action="#">
<input type="checkbox" name="box"
checked="checked" onclick="boxes('clase1',this);"> Clase 1
<input type="checkbox" name="box"
checked="checked" onclick="boxes('clase2',this);"> Clase 2
<input type="checkbox" name="box"
checked="checked" onclick="boxes('clase3',this);"> Clase 3
<input type="checkbox" name="box"
checked="checked" onclick="boxes('clase4',this);"> Clase 4
<input type="checkbox" name="box"
checked="checked" onclick="boxes('clase5',this);"> Clase 5
<input type="checkbox" name="box"
checked="checked" onclick="boxes('clase6',this);"> Clase 6
<input type="checkbox" name="box"
checked="checked" onclick="boxes('clase7',this);"> Clase 7
</form>
<div id="lista">
<ul>
<li class="clase1 clase2">clase1 clase2</li>
<li class="clase1 clase3 clase4">clase1 clase3 clase4</li>
<li class="clase3 clase4">clase3 clase4</li>
<li class="clase1 clase3">clase1 clase3</li>
<li class="clase2 clase4 clase5">clase2 clase4 clase5</li>
<li class="clase3 clase6">clase3 clase6</li>
<li class="clase7">clase7</li>
</ul>
</div>
</body>
</html>

Vamos a desglosarla un poco
la función en los cbox se invoca asi
onclick="boxes('clase1',this);"
pasando como parámertros la clase a buscar en el class y la palabra reservada this, que representa al propio elemento (el checkbox que se clickea en este caso)

Código:

function boxes(laClase,t){
var cb = document.getElementsByName('box');
var lista = document.getElementsByClassName(laClase);

con eso creas dos arrays, uno contiene todos los cbox de nombre "box" y otro que tiene todos los li con la clase pasada (recordá que getElementsByClassName() no funciona en IE<9, más arriba en otro post dejé una función equivalente para IE8)

Código:

	for (e=0; e < cb.length; e++) {
		if(t.checked == false){

ahi recorrés todos los cbox y si el clickeado (recordá this y el argumento t) está en false (como todos vienen marcados por defecto, con el primer click ya pasa a false

Código:

			for (var i=0; i<lista.length; i++) {
			//console.log(lista[i].className); // descomentar para verificar
			lista[i].style.display = 'none';
			}

recorres todos los elementos de lista, y le cambias el style.display, date cuenta que a cada click la variable lista se regenera y contiene solo los elementos que tengan la clase definida en el primer argumento de la función, luego, obviamente, haces a la inversa

Demo:
http://foros.emprear.com/javascript/...por_class.html

Ahora, a estudiar, http://librosweb.es es un buen inicio

Saludos

turuleto69 · #9 (**permalink**) 18/02/2013, 04:19

Wow increíble!! Muchísimas gracias. El código hace justo lo que necesito. Efectivamente lo que estaba intentando es hacer una especie de filtro para que el usuario pueda descontar lo que no le interesa y así encontrar más rápido lo que busca.
¡¡Mil gracias!! :D
Ya estoy introduciéndome al javascript con la página que me mostraste. Me interesa mucho la verdad.
Muchas gracias de nuevo. Un saludo ;)