Mi primer proceso de compra...

sergi_multimedia · #1 (**permalink**) 28/09/2012, 17:19

Hola gente, estoy haciedo por primera vez un proceso de compra. Estoy utilizando jQuery.

He creado en HTML todas las posibilidades posibles que se pueden dar en el proceso, y en css las he puesto todas en "display: none;" Entonces, cuando se selecciona una opción a través de jquery le doy a display:incline" y así hasta hacer les 3 pasos.

Si sigues los 4 pasos en orden no hay problema, el problema es que cuando estas en el paso 3 y le das a un boton del 2 dos se te abre otro bloque y se te desordenada tos, hay alguna opción para bloquear los pasos anterior activados?

probarlo por vosotros mismos:

http://sergibeltran.com/jim3/cables.html

Un saludo y mil gracias

Dradi7 · #2 (**permalink**) 28/09/2012, 22:22

Bueno según tu ejemplo que lo he visto deberías usar banderas para que una vez que este activado uno de los pasos ya no se vuelva a activar, otra manera seria que valides si uno de los pasos ya esta abierto y no volverlo a abrir

Saludos

sergi_multimedia · #3 (**permalink**) 29/09/2012, 07:27

Cita:

Iniciado por Dradi7

Bueno según tu ejemplo que lo he visto deberías usar banderas para que una vez que este activado uno de los pasos ya no se vuelva a activar, otra manera seria que valides si uno de los pasos ya esta abierto y no volverlo a abrir

Saludos

Te agradecería mucho que me comentaras como hacer eso.

Un saludo y gracias por pasarte.

Dradi7 · #4 (**permalink**) 29/09/2012, 18:47

Sino me equivoco este es todo tu SCRIPT

Código Javascript:

Ver original$(document).ready(function(){
   $(".black").click(function(evento){
   $("#in-color-black-length").css("display", "inline");
});
 
 
 
$("#in-color-black-length .10").click(function(evento){
   $("#in-color-black-length-10").css("display", "inline");
});
 
$("#in-color-black-length .12").click(function(evento){
   $("#in-color-black-length-12").css("display", "inline");
});
 
$("#in-color-black-length .15").click(function(evento){
   $("#in-color-black-length-15").css("display", "inline");
});
 
$("#in-color-black-length .18").click(function(evento){
   $("#in-color-black-length-18").css("display", "inline");
});
 
$("#in-color-black-length .20").click(function(evento){
   $("#in-color-black-length-20").css("display", "inline");
});
 
$("#in-color-black-length .25").click(function(evento){
   $("#in-color-black-length-25").css("display", "inline");
});
 
$("#in-color-black-length .30").click(function(evento){
   $("#in-color-black-length-30").css("display", "inline");
});
 
 
 
 
$("#in-color-black-length-10 .s-s").click(function(evento){
   $("#in-color-black-length-10-con-s-s").css("display", "inline");
});
 
$("#in-color-black-length-12 .s-s").click(function(evento){
   $("#in-color-black-length-12-con-s-s").css("display", "inline");
});
 
$("#in-color-black-length-15 .s-s").click(function(evento){
   $("#in-color-black-length-15-con-s-s").css("display", "inline");
});
 
$("#in-color-black-length-18 .s-s").click(function(evento){
   $("#in-color-black-length-18-con-s-s").css("display", "inline");
});
 
$("#in-color-black-length-20 .s-s").click(function(evento){
   $("#in-color-black-length-20-con-s-s").css("display", "inline");
});
 
$("#in-color-black-length-25 .s-s").click(function(evento){
   $("#in-color-black-length-25-con-s-s").css("display", "inline");
});
 
$("#in-color-black-length-30 .s-s").click(function(evento){
   $("#in-color-black-length-30-con-s-s").css("display", "inline");
});
 
 
 
$("#in-color-black-length-10 .ra-s").click(function(evento){
   $("#in-color-black-length-10-con-s-s").css("display", "inline");
});
 
$("#in-color-black-length-12 .ra-s").click(function(evento){
   $("#in-color-black-length-12-con-s-s").css("display", "inline");
});
 
$("#in-color-black-length-15 .ra-s").click(function(evento){
   $("#in-color-black-length-15-con-s-s").css("display", "inline");
});
 
$("#in-color-black-length-18 .s-s").click(function(evento){
   $("#in-color-black-length-18-con-s-s").css("display", "inline");
});
 
$("#in-color-black-length-20 .ra-s").click(function(evento){
   $("#in-color-black-length-20-con-s-s").css("display", "inline");
});
 
$("#in-color-black-length-25 .ra-s").click(function(evento){
   $("#in-color-black-length-25-con-s-s").css("display", "inline");
});
 
$("#in-color-black-length-30 .ra-s").click(function(evento){
   $("#in-color-black-length-30-con-s-s").css("display", "inline");
});
 
 
 
 
$("#in-color-black-length-10 .ss-s").click(function(evento){
   $("#in-color-black-length-10-con-s-s").css("display", "inline");
});
 
$("#in-color-black-length-12 .ss-s").click(function(evento){
   $("#in-color-black-length-12-con-s-s").css("display", "inline");
});
 
$("#in-color-black-length-15 .ss-s").click(function(evento){
   $("#in-color-black-length-15-con-s-s").css("display", "inline");
});
 
$("#in-color-black-length-18 .ss-s").click(function(evento){
   $("#in-color-black-length-18-con-s-s").css("display", "inline");
});
 
$("#in-color-black-length-20 .ss-s").click(function(evento){
   $("#in-color-black-length-20-con-s-s").css("display", "inline");
});
 
$("#in-color-black-length-25 .ss-s").click(function(evento){
   $("#in-color-black-length-25-con-s-s").css("display", "inline");
});
 
$("#in-color-black-length-30 .ss-s").click(function(evento){
   $("#in-color-black-length-30-con-s-s").css("display", "inline");
});
 
 
 
$("#in-color-black-length-10 .ras-s").click(function(evento){
   $("#in-color-black-length-10-con-s-s").css("display", "inline");
});
 
$("#in-color-black-length-12 .ras-s").click(function(evento){
   $("#in-color-black-length-12-con-s-s").css("display", "inline");
});
 
$("#in-color-black-length-15 .ras-s").click(function(evento){
   $("#in-color-black-length-15-con-s-s").css("display", "inline");
});
 
$("#in-color-black-length-18 .ras-s").click(function(evento){
   $("#in-color-black-length-18-con-s-s").css("display", "inline");
});
 
$("#in-color-black-length-20 .ras-s").click(function(evento){
   $("#in-color-black-length-20-con-s-s").css("display", "inline");
});
 
$("#in-color-black-length-25 .ras-s").click(function(evento){
   $("#in-color-black-length-25-con-s-s").css("display", "inline");
});
 
$("#in-color-black-length-30 .ras-s").click(function(evento){
   $("#in-color-black-length-30-con-s-s").css("display", "inline");
});
 
 
$(".blue").click(function(evento){
   $("#in-color-blue-length").css("display", "inline");
});
 
 
 
$("#in-color-blue-length .10").click(function(evento){
   $("#in-color-blue-length-10").css("display", "inline");
});
 
$("#in-color-blue-length .12").click(function(evento){
   $("#in-color-blue-length-12").css("display", "inline");
});
 
$("#in-color-blue-length .15").click(function(evento){
   $("#in-color-blue-length-15").css("display", "inline");
});
 
$("#in-color-blue-length .18").click(function(evento){
   $("#in-color-blue-length-18").css("display", "inline");
});
 
$("#in-color-blue-length .20").click(function(evento){
   $("#in-color-blue-length-20").css("display", "inline");
});
 
$("#in-color-blue-length .25").click(function(evento){
   $("#in-color-blue-length-25").css("display", "inline");
});
 
$("#in-color-blue-length .30").click(function(evento){
   $("#in-color-blue-length-30").css("display", "inline");
});
 
 
 
 
$("#in-color-blue-length-10 .s-s").click(function(evento){
   $("#in-color-blue-length-10-con-s-s").css("display", "inline");
});
 
$("#in-color-blue-length-12 .s-s").click(function(evento){
   $("#in-color-blue-length-12-con-s-s").css("display", "inline");
});
 
$("#in-color-blue-length-15 .s-s").click(function(evento){
   $("#in-color-blue-length-15-con-s-s").css("display", "inline");
});
 
$("#in-color-blue-length-18 .s-s").click(function(evento){
   $("#in-color-blue-length-18-con-s-s").css("display", "inline");
});
 
$("#in-color-blue-length-20 .s-s").click(function(evento){
   $("#in-color-blue-length-20-con-s-s").css("display", "inline");
});
 
$("#in-color-blue-length-25 .s-s").click(function(evento){
   $("#in-color-blue-length-25-con-s-s").css("display", "inline");
});
 
$("#in-color-blue-length-30 .s-s").click(function(evento){
   $("#in-color-blue-length-30-con-s-s").css("display", "inline");
});
 
 
 
$("#in-color-black-length-10 .ra-s").click(function(evento){
   $("#in-color-black-length-10-con-s-s").css("display", "inline");
});
 
$("#in-color-blue-length-12 .ra-s").click(function(evento){
   $("#in-color-blue-length-12-con-s-s").css("display", "inline");
});
 
$("#in-color-blue-length-15 .ra-s").click(function(evento){
   $("#in-color-blue-length-15-con-s-s").css("display", "inline");
});
 
$("#in-color-blue-length-18 .s-s").click(function(evento){
   $("#in-color-blue-length-18-con-s-s").css("display", "inline");
});
 
$("#in-color-blue-length-20 .ra-s").click(function(evento){
   $("#in-color-blue-length-20-con-s-s").css("display", "inline");
});
 
$("#in-color-blue-length-25 .ra-s").click(function(evento){
   $("#in-color-blue-length-25-con-s-s").css("display", "inline");
});
 
$("#in-color-blue-length-30 .ra-s").click(function(evento){
   $("#in-color-blue-length-30-con-s-s").css("display", "inline");
});
 
 
 
 
$("#in-color-blue-length-10 .ss-s").click(function(evento){
   $("#in-color-blue-length-10-con-s-s").css("display", "inline");
});
 
$("#in-color-blue-length-12 .ss-s").click(function(evento){
   $("#in-color-blue-length-12-con-s-s").css("display", "inline");
});
 
$("#in-color-blue-length-15 .ss-s").click(function(evento){
   $("#in-color-blue-length-15-con-s-s").css("display", "inline");
});
 
$("#in-color-blue-length-18 .ss-s").click(function(evento){
   $("#in-color-blue-length-18-con-s-s").css("display", "inline");
});
 
$("#in-color-blue-length-20 .ss-s").click(function(evento){
   $("#in-color-blue-length-20-con-s-s").css("display", "inline");
});
 
$("#in-color-blue-length-25 .ss-s").click(function(evento){
   $("#in-color-blue-length-25-con-s-s").css("display", "inline");
});
 
$("#in-color-blue-length-30 .ss-s").click(function(evento){
   $("#in-color-blue-length-30-con-s-s").css("display", "inline");
});
 
 
 
$("#in-color-blue-length-10 .ras-s").click(function(evento){
   $("#in-color-blue-length-10-con-s-s").css("display", "inline");
});
 
$("#in-color-blue-length-12 .ras-s").click(function(evento){
   $("#in-color-blue-length-12-con-s-s").css("display", "inline");
});
 
$("#in-color-blue-length-15 .ras-s").click(function(evento){
   $("#in-color-blue-length-15-con-s-s").css("display", "inline");
});
 
$("#in-color-blue-length-18 .ras-s").click(function(evento){
   $("#in-color-blue-length-18-con-s-s").css("display", "inline");
});
 
$("#in-color-blue-length-20 .ras-s").click(function(evento){
   $("#in-color-blue-length-20-con-s-s").css("display", "inline");
});
 
$("#in-color-blue-length-25 .ras-s").click(function(evento){
   $("#in-color-blue-length-25-con-s-s").css("display", "inline");
});
 
$("#in-color-blue-length-30 .ras-s").click(function(evento){
   $("#in-color-blue-length-30-con-s-s").css("display", "inline");
});
 
});

Por ejemplo en esta parte de tu código puedes preguntar primero si el div ya se encuentra abierto, asi, si no esta abierto ya no haces nada

Código Javascript:

Ver original$(".black").click(function(evento){
    // SE PREGUNTA SI ESTA ABIERTO EL DIV
    if($('#in-color-black-length').attr('style').indexOf('display: inline') == -1)
        $("#in-color-black-length").css("display", "inline");
});

sergi_multimedia · #5 (**permalink**) 30/09/2012, 05:44

Hola Dradi7.

Exactamente, con este código que me has puesto que estamos haciendo? Es que no veo el resultado del código.

Muchas gracias para ayudarme, y perdona mi ignorancia sobre el tema.

Un saludo ;)

sergi_multimedia · #6 (**permalink**) 01/10/2012, 14:37

Exactamente yo lo que quiero hacer es que los div que se han activado ya por javascript no se pueda interactuar, ya sea bloqueando ese div, o no sé, de alguna manera, la verdad es que no sé que hacer, el comentario anterior no lo acabé de entender bien, no he visto ningún cambio a la práctica. El tiempo va pasando y me he quedado bloqueado en este punto.

A ver si hay alguien que me pueda ayudar, gracias de antemano ;)

Un saludo ;)

Dradi7 · #7 (**permalink**) 03/10/2012, 00:14

Cita:

Iniciado por Dradi7

Sino me equivoco este es todo tu SCRIPT

Código Javascript:

Ver original$(".black").click(function(evento){
    // SE PREGUNTA SI ESTA ABIERTO EL DIV
    if($('#in-color-black-length').attr('style').indexOf('display: inline') == -1)
        $("#in-color-black-length").css("display", "inline");
});

Bueno el codigo que te puse esta diciendo que si el elemento ya se encuentra visible entonces ya no lo vuelva a mostrar solo esto sencillamente

Saludos

sergi_multimedia · #8 (**permalink**) 04/10/2012, 19:06

He estado buscando por Internet, y he visto que hay una función de Jquery que habilita y deshabita cualquier elemento que queramos.

Entonces, como sería el código?

Lo que quiero decir es que cuando se aprete el botón "black" en el primer paso de compra, el botón azúl quede inhabilitado de alguna manera, para que no se me habran más divs.

La función de la que hablo es la siguiente:

$('input[type="submit"]').attr('disabled','disabled');

Pero mis conocimientos de jquery y javascript son muy muy bajos, apenas estoy empezando.

Un saludo y gracias de antemano.

Os recuerdo el enlace de la web:

http://sergibeltran.com/jim3/cables