¿Cómo puedo escalar esto?

Question

Tengo un formulario que tiene unas pocas páginas. Para recorrer la forma, todo lo que estoy haciendo es mostrar y ocultar divs de contenedor. La última página es una página de confirmación antes de enviar. Toma el contenido del formulario y lo distribuye para que el usuario pueda ver lo que acaba de completar. Si hacen clic en uno de estos, los llevará de vuelta a la página en la que estaban (# nav1 ~ 3), se enfocarán en ese campo y les dejarán escribir un nuevo valor si es necesario.

Usando jQuery, hice variables para CADA campo / radio / chequear / seleccionar / textarea / lo que sea. Si mi método parece tonto, por favor, pwn me pero básicamente, y este método ya funciona bien, pero estoy tratando de escalar y no tengo ni idea de cómo porque realmente no sé qué Estoy haciendo. Pensamientos?

  var field1 = '<a href="#" 
    onclick="$(\'#nav1\').click();$(\'input#field-1\').focus();" 
    title="Click to edit">' + 
    $('input#field-1').val() + '</a>';
    $('#field1-confirm').html(field1);

  var field2 = '<a href="#" 
    onclick="$(\'#nav1\').click();$(\'input#field-2\').focus();" 
    title="Click to edit">' + 
    $('input#field-2').val() + '</a>';
    $('#field2-confirm').html(field2);

Y así sucesivamente, con field3, 4, 5 ~ 25, etc.

Si pudieras ayudar a explicar en términos no programados, te amaré para siempre.

Answer 1

Sin complicarse demasiado, puedes hacer una función que maneje las cosas repetitivas. No he probado esto, pero obtendrás la idea:

function valField(fieldName,navName) {
    var output = '<a href="javascript://" onclick="$(\''+navName+'\').click();$(\'input#'+fieldName+'\').focus();" title="Click to edit">' + $('input#'+fieldName).val() + '</a>';
 $('#'+fieldName+'-confirm').html(output);
}

valField("field-1","nav1")
valField("field-2","nav1")
valField("field-293","nav3")

Cuando mejores en Javascript, probablemente harías un bucle para manejar todos estos " valField () " llama, o escribirías algo que inspeccionaría tu formulario, encontraría lo que había allí y generaría controladores de eventos para pegarlo todo de forma automática. Eso ciertamente no es " n00bware " ;, pero te da algo en qué pensar.

También en lugar de usar esto en tu salida:

$(\''+navName+'\').click();

Podrías reemplazarlo con cualquier código que esté realmente en el clic de la pestaña de navegación.

Hay docenas de formas de resolver este problema. Dé un paso a la vez.

Answer 2

Comenzaría con una introducción a las matrices: este se ve bastante decente, porque entrantes.

Envuelva su cabeza alrededor de matrices y bucles para comenzar, y estará bien servido.