Efectos al aparecer y desaparecer capas

#1 (**permalink**) 28/03/2016, 11:06

Buenas,

he estado probando una serie de elementos que al clickear sobre ellos hace que vaya apareciendo un ingrediente de una tarta al pulsar sobre cada uno. El problema que tengo es que no sé cómo hacer para que cuando vuelvo a clickear sobre uno de esos elementos vuelva a quitarle el borde de color activado que se ha puesto al clickear por primera vez (el que agrego de color verde con jquery).
También me gustaría saber cómo se podría hacer para que una vez elegidos, por ejemplo, tres ingredientes automáticamente me redirija a una url, estoy probando pero no logro arreglar estas dos cosas. Mi código es:

Código HTML:

 <div class="item item-chocolate">
            <a href="#" class="show-chocolate">
              <img src="chocolate.png" alt="chocolate" />
              <p>chocolate</p>
            </a>
          </div>
          <div class="item item-cerezas">
            <a href="#" class="show-cerezas">
              <img src="cerezas.png" alt="cerezas" />
              <p>cerezas</p>
            </a>
          </div>
          <div class="item item-caramelos">
            <a href="#" class="show-caramelos">
              <img src="caramelos.png" alt="caramelos" />
              <p>caramelos</p>
            </a>
          </div>
          <div class="item item-merengue">
            <a href="#" class="show-merengue">
              <img src="merengue.png" alt="merengue" />
              <p>merengue</p>
            </a>
          </div>
          <div class="item item-figura">
            <a href="#"figura.png" alt="figura" />
              <p>figura</p>
            </a>
          </div>
          <div class="item item-lazo">
            <a href="#" class="show-lazo">
              <img src="lazo.png" alt="lazo" />
              <p>lazo</p>
            </a>
          </div>

jquery

Código:

 <script src="http://code.jquery.com/jquery.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){ 
         $('.show-chocolate').on('click',function(){
            $('.bacon').toggle('slow');
            $('.item-chocolate img').css("border", "6px solid green");
         });
         $('.show-cereza').on('click',function(){
            $('.cereza').toggle('slow');
            $('.item-cereza img').css("border", "6px solid green");
         });
        $('.show-caramelos').on('click',function(){
            $('.caramelosi').toggle('slow');
            $('.item-caramelos img').css("border", "6px solid green");
         });
        $('.show-merengue').on('click',function(){
            $('.merengue').toggle('slow');
            $('.item-merengue img').css("border", "6px solid green");
         });
        $('.show-figura').on('click',function(){
            $('.figura').toggle('slow');
            $('.item-figura img').css("border", "6px solid green");
         });
        $('.show-lazos').on('click',function(){
            $('.lazos').toggle('slow');
            $('.item-lazos img').css("border", "6px solid green");
         });
      });
    </script>

Saludos!!!!

sintel_1 · #2 (**permalink**) 31/03/2016, 09:29

Hola.

Yo usaria la funcion toggleClass() para añadir o quitar una clase.

en la hoja de estilos añade esta regla :

.verde { border: 6px solid green; }

y en el js añade esa clase con toggleClass

y en cuanto a lo de redirigir cuando haya 3 seleccionadas yo usaria una funcion que cuente cuantas clases "verde"
seria algo asi:

Código Javascript:

Ver original$(document).ready(function(){ 
         $('.show-chocolate').on('click',function(){
            $('.bacon').toggle('slow');
            $('.item-chocolate img').toggleClass("verde");
            cuenta();            
         });
         $('.show-cereza').on('click',function(){
            $('.cereza').toggle('slow');
            $('.item-cereza img').toggleClass("verde");
            cuenta();            
         });
        $('.show-caramelos').on('click',function(){
            $('.caramelosi').toggle('slow');
            $('.item-caramelos img').toggleClass("verde");
            cuenta();            
         });
        $('.show-merengue').on('click',function(){
            $('.merengue').toggle('slow');
            $('.item-merengue img').toggleClass("verde");
            cuenta();            
         });
        $('.show-figura').on('click',function(){
            $('.figura').toggle('slow');
            $('.item-figura img').toggleClass("verde");
            cuenta();            
         });
        $('.show-lazos').on('click',function(){
            $('.lazos').toggle('slow');
            $('.item-lazos img').toggleClass("verde");
            cuenta();            
         });         
         
      });
    function cuenta(){
    var seleccionadas = $('.verde').length;
    if (seleccionadas > 2){
    window.location = 'http://www.google.com';
         }}

no lo he probado, espero te funcione
saludos

#3 (**permalink**) 02/04/2016, 19:03

Buenas,

funciona correctamente la primera vez que entras - selecciona tres y redirecciona -, pero si actualizas el navegador o vuelves a entrar de nuevo, siempre redirecciona al seleccionar 2...

#4 (**permalink**) 03/04/2016, 11:18

Nada, lo he seguido probando pero en cuanto seleccionas 2 elementos ya redirecciona siempre...

Cita:

Iniciado por sintel_1

Hola.

Yo usaria la funcion toggleClass() para añadir o quitar una clase.

en la hoja de estilos añade esta regla :

.verde { border: 6px solid green; }

y en el js añade esa clase con toggleClass

y en cuanto a lo de redirigir cuando haya 3 seleccionadas yo usaria una funcion que cuente cuantas clases "verde"
seria algo asi:

Código Javascript:

Ver original$(document).ready(function(){ 
         $('.show-chocolate').on('click',function(){
            $('.bacon').toggle('slow');
            $('.item-chocolate img').toggleClass("verde");
            cuenta();            
         });
         $('.show-cereza').on('click',function(){
            $('.cereza').toggle('slow');
            $('.item-cereza img').toggleClass("verde");
            cuenta();            
         });
        $('.show-caramelos').on('click',function(){
            $('.caramelosi').toggle('slow');
            $('.item-caramelos img').toggleClass("verde");
            cuenta();            
         });
        $('.show-merengue').on('click',function(){
            $('.merengue').toggle('slow');
            $('.item-merengue img').toggleClass("verde");
            cuenta();            
         });
        $('.show-figura').on('click',function(){
            $('.figura').toggle('slow');
            $('.item-figura img').toggleClass("verde");
            cuenta();            
         });
        $('.show-lazos').on('click',function(){
            $('.lazos').toggle('slow');
            $('.item-lazos img').toggleClass("verde");
            cuenta();            
         });         
         
      });
    function cuenta(){
    var seleccionadas = $('.verde').length;
    if (seleccionadas > 2){
    window.location = 'http://www.google.com';
         }}

no lo he probado, espero te funcione
saludos

#5 (**permalink**) 03/04/2016, 12:47

Sigue sin funcionar

#6 (**permalink**) 03/04/2016, 13:05

Lo he solucionado así:

function cuenta(){
var seleccionadas = $('.green').length;
if (seleccionadas > 5){
window.location = 'http://www.mobusi.com';
}};

Coge siempre dos menos que el número que se pone en el if...

sintel_1 · #7 (**permalink**) 04/04/2016, 01:49

Hola.

Habría que ver el html si tienes algun error de cierre de etiquetas, podrias pasar el validador de la w3c o con el webdeveloper en firefox comprobar el codigo resultante a ver donde te genera esa clase.

De todas formas para para asegurarte que no tienes ninguna clase "verde" cuando carga el html podrias poner:

$(".verde").removeClass("verde");

como primera regla despues de ready();

saludos.