Como activo y desactivo un estilo .css (display: none; display: block;)

hackmastter · 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 [Seleccionar]

<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 [Seleccionar]


<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 [Seleccionar]


<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

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.

engel lex · 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

[u]nsigned · 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 (html4strict) [Seleccionar]

<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 (javascript) [Seleccionar]

$(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.

Test Foro de elhacker.net SMF 2.1

Como activo y desactivo un estilo .css (display: none; display: block;)

hackmastter

engel lex

[u]nsigned