Imprimir Página - Como activo y desactivo un estilo .css (display: none; display: block;)

Título: Como activo y desactivo un estilo .css (display: none; display: block;)
Publicado por: hackmastter en 13 Noviembre 2016, 01:53 am

Holo que tal todos...

Bueno, la cosa es que yo no se nada de JQuery asi que por ahí buscando y buscando solo logre conseguir este código:

Código:

<html>
<head>
 <title>Mostrar Ocultar</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script> 
<script>
$(document).ready(function(){
 $("#mayoria_edad").click(function(evento){
 if ($("#mayoria_edad").attr("checked")){
 $("#formulariomayores").css("display", "block");
 }else{
 $("#formulariomayores").css("display", "none");
 }
 });
});
</script>
</head>

<body>

<form>
Nombre: <input type="text" name="nombre">
<br>
<input type="checkbox" name="mayor_edad" value="1" id="mayoria_edad"> Soy mayor de edad
<br>
<div id="formulariomayores" style="display: none;">
Dato para mayores de edad: <input type="text" name="mayores_edad">
</div>
</form>

</body>
</html>

Esto lo que hace es que cuando el usuario presiona el botón "checked" el Style display: none; se desactica y en su lugar se activa el Style display: block;

La cosa es que como no se nada de JQuery ni javascript entonces no lo se modificar y yo lo que quiero es que los usuarios tengan, digamos seis checkbox uno para cada categoria:

Código:

<input type="checkbox" name="StyleLapiz" value="1" id="Lapiz">
<input type="checkbox" name="StyleBoligrafo" value="2" id="Boligrafo">
<input type="checkbox" name="StyleCreyon" value="3" id="Creyon">
<input type="checkbox" name="StyleAnimal" value="4" id="Animal">
<input type="checkbox" name="StylePersonas" value="5" id="Personas">
<input type="checkbox" name="StyleAnime" value="6" id="Anime">

Y luego, las imágenes:

Código:

<div class="Lapiz      Animal"><img src="Dibujo_001.png" /></div>
<div class="Boligrafo  Animal"><img src="Dibujo_002.jpg" /></div>
<div class="Creyon     Animal"><img src="Dibujo_003.jpg" /></div>

<div class="Lapiz      Personas"><img src="Dibujo_004.jpg" /></div>
<div class="Boligrafo  Personas"><img src="Dibujo_005.jpg" /></div>
<div class="Creyon     Personas"><img src="Dibujo_006.jpg" /></div>

<div class="Lapiz      Anime"><img src="Dibujo_007.jpg" /></div>
<div class="Boligrafo  Anime"><img src="Dibujo_008.jpg" /></div>
<div class="Creyon     Anime"><img src="Dibujo_009.jpg" /></div>

Pero fíjense como las imágenes todas tienen iguales o diferentes categorías entre si, bueno, si yo solo quiero ver las imágenes de "Animal" entonces selecciono "Animal", si quiero ver "Personas" selecciono "Personas" y si quiero ver dos o mas a la vez solo selecciono "Animal" y "Lapiz" por ejemplo.
El problema de este código es que no funciona de manera correcta con dos o mas categorias.

En fin, quisiera ver si hay alguien que me pueda dar este código ya echo, si no es mucha molestia ;-)
Pero que funcione al menos con las seis categorias que les di arriba. Y no olviden el código .js :rolleyes:

Ok... Creo que fue mucho pedir. Pueden decirme entonces exactamente que busco.? Porque ya googlee lo mas que pude y eso fue lo mas que conseguí.

Me pueden ayudar en algo.?? :-\

MOD: No hacer doble post. Usa el botón modificar.

Título: Re: Como activo y desactivo un estilo .css (display: none; display: block;)
Publicado por: engel lex en 15 Noviembre 2016, 04:15 am

Te recomiendo hacer un tutorial de jquery, eso que quieres hacer es entre las cosas básicas, con usar un selector y cambiarle el css basta

Título: Re: Como activo y desactivo un estilo .css (display: none; display: block;)
Publicado por: [u]nsigned en 15 Noviembre 2016, 16:46 pm

Para que te funciones con mas de 1 elemento en lugar de usar el selector jQuery por id $('#idDeTuElemento') tendrias que hacerlo por un elemnto compartido, lo ideal seria usar un nombre de clases. Por ejemplo a todas las categorias les creamos la clases 'mi_categoria'

Código

<input class="mi_categoria" type="checkbox" name="StyleLapiz" value="1" id="Lapiz">
<input class="mi_categoria" type="checkbox" name="StyleBoligrafo" value="2" id="Boligrafo">
<input class="mi_categoria" type="checkbox" name="StyleCreyon" value="3" id="Creyon">
<input class="mi_categoria" type="checkbox" name="StyleAnimal" value="4" id="Animal">
<input class="mi_categoria" type="checkbox" name="StylePersonas" value="5" id="Personas">
<input class="mi_categoria" type="checkbox" name="StyleAnime" value="6" id="Anime">

Entonces en el selector de jQuery tenes que apsar el nombre de la clase, te pongo un ejemplo que cuando se clickea en un checkbox se muestre un alerta:

Código

$(document).ready( function(){
$('.mi_categoria').on('click', function(e){
      var item_id = $(this).attr('id');
      alert(item_id)
   });
} );

Demo online: http://codepen.io/anon/pen/MbedOG

Otra cosa, no se debe usar $('...').click(...) es mejor usar $('...').on('click',function(){...})

PD: Si nos sabes los basico de javascript es imposible entender jQuery, asi que te recomiendo que te leas algunos tutoriales de introduccion, lo basico de js y jquery se aprende y 2 o 3 dias.

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: hackmastter en 13 Noviembre 2016, 01:53 am