Foros del Web - Ver Mensaje Individual - Ocultar elementos de una lista según su clase

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