Foros del Web » Programando para Internet » Javascript »

Mi primer proceso de compra...

Estas en el tema de Mi primer proceso de compra... en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 28/09/2012, 17:19
Avatar de sergi_multimedia  
Fecha de Ingreso: noviembre-2010
Mensajes: 213
Antigüedad: 13 años, 4 meses
Puntos: 4
Exclamación Mi primer proceso de compra...

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
  #2 (permalink)  
Antiguo 28/09/2012, 22:22
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 15 años, 9 meses
Puntos: 220
Respuesta: Mi primer proceso de compra...

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
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #3 (permalink)  
Antiguo 29/09/2012, 07:27
Avatar de sergi_multimedia  
Fecha de Ingreso: noviembre-2010
Mensajes: 213
Antigüedad: 13 años, 4 meses
Puntos: 4
Respuesta: Mi primer proceso de compra...

Cita:
Iniciado por Dradi7 Ver Mensaje
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.
  #4 (permalink)  
Antiguo 29/09/2012, 18:47
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 15 años, 9 meses
Puntos: 220
Respuesta: Mi primer proceso de compra...

Sino me equivoco este es todo tu SCRIPT

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.    $(".black").click(function(evento){
  3.    $("#in-color-black-length").css("display", "inline");
  4. });
  5.  
  6.  
  7.  
  8. $("#in-color-black-length .10").click(function(evento){
  9.    $("#in-color-black-length-10").css("display", "inline");
  10. });
  11.  
  12. $("#in-color-black-length .12").click(function(evento){
  13.    $("#in-color-black-length-12").css("display", "inline");
  14. });
  15.  
  16. $("#in-color-black-length .15").click(function(evento){
  17.    $("#in-color-black-length-15").css("display", "inline");
  18. });
  19.  
  20. $("#in-color-black-length .18").click(function(evento){
  21.    $("#in-color-black-length-18").css("display", "inline");
  22. });
  23.  
  24. $("#in-color-black-length .20").click(function(evento){
  25.    $("#in-color-black-length-20").css("display", "inline");
  26. });
  27.  
  28. $("#in-color-black-length .25").click(function(evento){
  29.    $("#in-color-black-length-25").css("display", "inline");
  30. });
  31.  
  32. $("#in-color-black-length .30").click(function(evento){
  33.    $("#in-color-black-length-30").css("display", "inline");
  34. });
  35.  
  36.  
  37.  
  38.  
  39. $("#in-color-black-length-10 .s-s").click(function(evento){
  40.    $("#in-color-black-length-10-con-s-s").css("display", "inline");
  41. });
  42.  
  43. $("#in-color-black-length-12 .s-s").click(function(evento){
  44.    $("#in-color-black-length-12-con-s-s").css("display", "inline");
  45. });
  46.  
  47. $("#in-color-black-length-15 .s-s").click(function(evento){
  48.    $("#in-color-black-length-15-con-s-s").css("display", "inline");
  49. });
  50.  
  51. $("#in-color-black-length-18 .s-s").click(function(evento){
  52.    $("#in-color-black-length-18-con-s-s").css("display", "inline");
  53. });
  54.  
  55. $("#in-color-black-length-20 .s-s").click(function(evento){
  56.    $("#in-color-black-length-20-con-s-s").css("display", "inline");
  57. });
  58.  
  59. $("#in-color-black-length-25 .s-s").click(function(evento){
  60.    $("#in-color-black-length-25-con-s-s").css("display", "inline");
  61. });
  62.  
  63. $("#in-color-black-length-30 .s-s").click(function(evento){
  64.    $("#in-color-black-length-30-con-s-s").css("display", "inline");
  65. });
  66.  
  67.  
  68.  
  69. $("#in-color-black-length-10 .ra-s").click(function(evento){
  70.    $("#in-color-black-length-10-con-s-s").css("display", "inline");
  71. });
  72.  
  73. $("#in-color-black-length-12 .ra-s").click(function(evento){
  74.    $("#in-color-black-length-12-con-s-s").css("display", "inline");
  75. });
  76.  
  77. $("#in-color-black-length-15 .ra-s").click(function(evento){
  78.    $("#in-color-black-length-15-con-s-s").css("display", "inline");
  79. });
  80.  
  81. $("#in-color-black-length-18 .s-s").click(function(evento){
  82.    $("#in-color-black-length-18-con-s-s").css("display", "inline");
  83. });
  84.  
  85. $("#in-color-black-length-20 .ra-s").click(function(evento){
  86.    $("#in-color-black-length-20-con-s-s").css("display", "inline");
  87. });
  88.  
  89. $("#in-color-black-length-25 .ra-s").click(function(evento){
  90.    $("#in-color-black-length-25-con-s-s").css("display", "inline");
  91. });
  92.  
  93. $("#in-color-black-length-30 .ra-s").click(function(evento){
  94.    $("#in-color-black-length-30-con-s-s").css("display", "inline");
  95. });
  96.  
  97.  
  98.  
  99.  
  100. $("#in-color-black-length-10 .ss-s").click(function(evento){
  101.    $("#in-color-black-length-10-con-s-s").css("display", "inline");
  102. });
  103.  
  104. $("#in-color-black-length-12 .ss-s").click(function(evento){
  105.    $("#in-color-black-length-12-con-s-s").css("display", "inline");
  106. });
  107.  
  108. $("#in-color-black-length-15 .ss-s").click(function(evento){
  109.    $("#in-color-black-length-15-con-s-s").css("display", "inline");
  110. });
  111.  
  112. $("#in-color-black-length-18 .ss-s").click(function(evento){
  113.    $("#in-color-black-length-18-con-s-s").css("display", "inline");
  114. });
  115.  
  116. $("#in-color-black-length-20 .ss-s").click(function(evento){
  117.    $("#in-color-black-length-20-con-s-s").css("display", "inline");
  118. });
  119.  
  120. $("#in-color-black-length-25 .ss-s").click(function(evento){
  121.    $("#in-color-black-length-25-con-s-s").css("display", "inline");
  122. });
  123.  
  124. $("#in-color-black-length-30 .ss-s").click(function(evento){
  125.    $("#in-color-black-length-30-con-s-s").css("display", "inline");
  126. });
  127.  
  128.  
  129.  
  130. $("#in-color-black-length-10 .ras-s").click(function(evento){
  131.    $("#in-color-black-length-10-con-s-s").css("display", "inline");
  132. });
  133.  
  134. $("#in-color-black-length-12 .ras-s").click(function(evento){
  135.    $("#in-color-black-length-12-con-s-s").css("display", "inline");
  136. });
  137.  
  138. $("#in-color-black-length-15 .ras-s").click(function(evento){
  139.    $("#in-color-black-length-15-con-s-s").css("display", "inline");
  140. });
  141.  
  142. $("#in-color-black-length-18 .ras-s").click(function(evento){
  143.    $("#in-color-black-length-18-con-s-s").css("display", "inline");
  144. });
  145.  
  146. $("#in-color-black-length-20 .ras-s").click(function(evento){
  147.    $("#in-color-black-length-20-con-s-s").css("display", "inline");
  148. });
  149.  
  150. $("#in-color-black-length-25 .ras-s").click(function(evento){
  151.    $("#in-color-black-length-25-con-s-s").css("display", "inline");
  152. });
  153.  
  154. $("#in-color-black-length-30 .ras-s").click(function(evento){
  155.    $("#in-color-black-length-30-con-s-s").css("display", "inline");
  156. });
  157.  
  158.  
  159. $(".blue").click(function(evento){
  160.    $("#in-color-blue-length").css("display", "inline");
  161. });
  162.  
  163.  
  164.  
  165. $("#in-color-blue-length .10").click(function(evento){
  166.    $("#in-color-blue-length-10").css("display", "inline");
  167. });
  168.  
  169. $("#in-color-blue-length .12").click(function(evento){
  170.    $("#in-color-blue-length-12").css("display", "inline");
  171. });
  172.  
  173. $("#in-color-blue-length .15").click(function(evento){
  174.    $("#in-color-blue-length-15").css("display", "inline");
  175. });
  176.  
  177. $("#in-color-blue-length .18").click(function(evento){
  178.    $("#in-color-blue-length-18").css("display", "inline");
  179. });
  180.  
  181. $("#in-color-blue-length .20").click(function(evento){
  182.    $("#in-color-blue-length-20").css("display", "inline");
  183. });
  184.  
  185. $("#in-color-blue-length .25").click(function(evento){
  186.    $("#in-color-blue-length-25").css("display", "inline");
  187. });
  188.  
  189. $("#in-color-blue-length .30").click(function(evento){
  190.    $("#in-color-blue-length-30").css("display", "inline");
  191. });
  192.  
  193.  
  194.  
  195.  
  196. $("#in-color-blue-length-10 .s-s").click(function(evento){
  197.    $("#in-color-blue-length-10-con-s-s").css("display", "inline");
  198. });
  199.  
  200. $("#in-color-blue-length-12 .s-s").click(function(evento){
  201.    $("#in-color-blue-length-12-con-s-s").css("display", "inline");
  202. });
  203.  
  204. $("#in-color-blue-length-15 .s-s").click(function(evento){
  205.    $("#in-color-blue-length-15-con-s-s").css("display", "inline");
  206. });
  207.  
  208. $("#in-color-blue-length-18 .s-s").click(function(evento){
  209.    $("#in-color-blue-length-18-con-s-s").css("display", "inline");
  210. });
  211.  
  212. $("#in-color-blue-length-20 .s-s").click(function(evento){
  213.    $("#in-color-blue-length-20-con-s-s").css("display", "inline");
  214. });
  215.  
  216. $("#in-color-blue-length-25 .s-s").click(function(evento){
  217.    $("#in-color-blue-length-25-con-s-s").css("display", "inline");
  218. });
  219.  
  220. $("#in-color-blue-length-30 .s-s").click(function(evento){
  221.    $("#in-color-blue-length-30-con-s-s").css("display", "inline");
  222. });
  223.  
  224.  
  225.  
  226. $("#in-color-black-length-10 .ra-s").click(function(evento){
  227.    $("#in-color-black-length-10-con-s-s").css("display", "inline");
  228. });
  229.  
  230. $("#in-color-blue-length-12 .ra-s").click(function(evento){
  231.    $("#in-color-blue-length-12-con-s-s").css("display", "inline");
  232. });
  233.  
  234. $("#in-color-blue-length-15 .ra-s").click(function(evento){
  235.    $("#in-color-blue-length-15-con-s-s").css("display", "inline");
  236. });
  237.  
  238. $("#in-color-blue-length-18 .s-s").click(function(evento){
  239.    $("#in-color-blue-length-18-con-s-s").css("display", "inline");
  240. });
  241.  
  242. $("#in-color-blue-length-20 .ra-s").click(function(evento){
  243.    $("#in-color-blue-length-20-con-s-s").css("display", "inline");
  244. });
  245.  
  246. $("#in-color-blue-length-25 .ra-s").click(function(evento){
  247.    $("#in-color-blue-length-25-con-s-s").css("display", "inline");
  248. });
  249.  
  250. $("#in-color-blue-length-30 .ra-s").click(function(evento){
  251.    $("#in-color-blue-length-30-con-s-s").css("display", "inline");
  252. });
  253.  
  254.  
  255.  
  256.  
  257. $("#in-color-blue-length-10 .ss-s").click(function(evento){
  258.    $("#in-color-blue-length-10-con-s-s").css("display", "inline");
  259. });
  260.  
  261. $("#in-color-blue-length-12 .ss-s").click(function(evento){
  262.    $("#in-color-blue-length-12-con-s-s").css("display", "inline");
  263. });
  264.  
  265. $("#in-color-blue-length-15 .ss-s").click(function(evento){
  266.    $("#in-color-blue-length-15-con-s-s").css("display", "inline");
  267. });
  268.  
  269. $("#in-color-blue-length-18 .ss-s").click(function(evento){
  270.    $("#in-color-blue-length-18-con-s-s").css("display", "inline");
  271. });
  272.  
  273. $("#in-color-blue-length-20 .ss-s").click(function(evento){
  274.    $("#in-color-blue-length-20-con-s-s").css("display", "inline");
  275. });
  276.  
  277. $("#in-color-blue-length-25 .ss-s").click(function(evento){
  278.    $("#in-color-blue-length-25-con-s-s").css("display", "inline");
  279. });
  280.  
  281. $("#in-color-blue-length-30 .ss-s").click(function(evento){
  282.    $("#in-color-blue-length-30-con-s-s").css("display", "inline");
  283. });
  284.  
  285.  
  286.  
  287. $("#in-color-blue-length-10 .ras-s").click(function(evento){
  288.    $("#in-color-blue-length-10-con-s-s").css("display", "inline");
  289. });
  290.  
  291. $("#in-color-blue-length-12 .ras-s").click(function(evento){
  292.    $("#in-color-blue-length-12-con-s-s").css("display", "inline");
  293. });
  294.  
  295. $("#in-color-blue-length-15 .ras-s").click(function(evento){
  296.    $("#in-color-blue-length-15-con-s-s").css("display", "inline");
  297. });
  298.  
  299. $("#in-color-blue-length-18 .ras-s").click(function(evento){
  300.    $("#in-color-blue-length-18-con-s-s").css("display", "inline");
  301. });
  302.  
  303. $("#in-color-blue-length-20 .ras-s").click(function(evento){
  304.    $("#in-color-blue-length-20-con-s-s").css("display", "inline");
  305. });
  306.  
  307. $("#in-color-blue-length-25 .ras-s").click(function(evento){
  308.    $("#in-color-blue-length-25-con-s-s").css("display", "inline");
  309. });
  310.  
  311. $("#in-color-blue-length-30 .ras-s").click(function(evento){
  312.    $("#in-color-blue-length-30-con-s-s").css("display", "inline");
  313. });
  314.  
  315. });

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
  1. $(".black").click(function(evento){
  2.     // SE PREGUNTA SI ESTA ABIERTO EL DIV
  3.     if($('#in-color-black-length').attr('style').indexOf('display: inline') == -1)
  4.         $("#in-color-black-length").css("display", "inline");
  5. });
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #5 (permalink)  
Antiguo 30/09/2012, 05:44
Avatar de sergi_multimedia  
Fecha de Ingreso: noviembre-2010
Mensajes: 213
Antigüedad: 13 años, 4 meses
Puntos: 4
Respuesta: Mi primer proceso de compra...

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 ;)
  #6 (permalink)  
Antiguo 01/10/2012, 14:37
Avatar de sergi_multimedia  
Fecha de Ingreso: noviembre-2010
Mensajes: 213
Antigüedad: 13 años, 4 meses
Puntos: 4
Respuesta: Mi primer proceso de compra...

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 ;)
  #7 (permalink)  
Antiguo 03/10/2012, 00:14
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 15 años, 9 meses
Puntos: 220
Respuesta: Mi primer proceso de compra...

Cita:
Iniciado por Dradi7 Ver Mensaje
Sino me equivoco este es todo tu SCRIPT

Código Javascript:
Ver original
  1. $(".black").click(function(evento){
  2.     // SE PREGUNTA SI ESTA ABIERTO EL DIV
  3.     if($('#in-color-black-length').attr('style').indexOf('display: inline') == -1)
  4.         $("#in-color-black-length").css("display", "inline");
  5. });
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
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #8 (permalink)  
Antiguo 04/10/2012, 19:06
Avatar de sergi_multimedia  
Fecha de Ingreso: noviembre-2010
Mensajes: 213
Antigüedad: 13 años, 4 meses
Puntos: 4
Respuesta: Mi primer proceso de compra...

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

Etiquetas: html, primer, proceso, botones
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:43.