Jquery: ¿Por qué uno funciona y el otro no?

Estoy trabajando en una aplicación para iPad y el código tiene más de 1000 líneas si es código jquery y sé que puede ser más corto, así que hago una página de prueba para que mi ciclo funcione. Tengo 2 páginas de prueba y el mismo código, pero solo funciona en una.

La página de trabajo:

    <div class="p1hole1"></div>
<div class="p1hole2"></div>
<div class="p1hole3"></div>
<div class="p1hole4"></div>
<div class="p2hole1"></div>
<div class="p2hole2"></div>
<div class="p2hole3"></div>
<div class="p2hole4"></div>
<div class="p3hole1"></div>
<div class="p3hole2"></div>
<div class="p3hole3"></div>
<div class="p3hole4"></div>
<script type="text/javascript">
(function () {
    for(p=1; p<4; p++){
        for ( i=1; i<5; i++){
                $(".p" + p + "hole" + i).html("class= 'p" + p + "hole" + i + "'");
        }
    }
})();
</script>

y no funciona el código:

<div>
  <select class="parhole1">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select>
</div>
<div>
  <select class="p1hole1">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select>
</div>
<div class="p1hole1type"></div>
<div class="p1hole2"></div>
<div class="p1hole3"></div>
<div class="p1hole4"></div>
<div class="p2hole1"></div>
<div class="p2hole2"></div>
<div class="p2hole3"></div>
<div class="p2hole4"></div>
<div class="p3hole1"></div>
<div class="p3hole2"></div>
<div class="p3hole3"></div>
<div class="p3hole4"></div>
<script type="text/javascript">
(function () {
    for(p=1; p<4; p++){
        for ( i=1; i<5; i++){
            $(".p" + p + "hole" + i).change(function () {
                n = $(".p" + p + "hole" + i + "option:selected").val();
                r = $(".parhole" + i + "option:selected").val();
                if (n == 1) {
                    $(".p" + p + "hole" + i + "type").html("Hole N One");
                }else {
                    $(".p" + p + "hole" + i + "type").html("Try agian");
                }
            });
        }
    }
})();
</script>

Entonces, ¿por qué uno funciona pero no el otro? Si puedo resolver esto, terminará, puede acortar mi código a más de 400 líneas.

preguntado el 12 de junio de 12 a las 20:06

2 Respuestas

Necesitas un espacio antes option en tus selectores.

n = $(".p" + p + "hole" + i + "option:selected").val();
r = $(".parhole" + i + "option:selected").val();

Tiene que leer:

n = $(".p" + p + "hole" + i + " option:selected").val();
r = $(".parhole" + i + " option:selected").val();

Respondido el 12 de junio de 12 a las 20:06

Como otro usuario ha declarado, a su selector le falta un espacio crucial. Habiendo dicho eso, su selector no necesita llamar al option:selected, ya que el valor de la opción seleccionada está disponible en el propio elemento seleccionado.

Hice un par de modificaciones para aumentar la escalabilidad, así como para usar el valor del elemento de selección:

$("select")
    .filter(function holeFilter(){ 
        return /^p\d+hole\d+$/.test( this.className );
    }).on("change", function(e){
        var sel = ".p" + this.className.match(/\d+/g).join("hole") + "type";
        $(sel).html( e.target.value == 1 ? "Hole in one!" : "Try again" );
    });​

Violín: http://jsfiddle.net/jonathansampson/qQWT7/

contestado el 23 de mayo de 17 a las 13:05

Me gusta es uno, pero la aplicación GRANDE tendría más como este en prueba.js Archivo. ¿Cómo pondría eso en su código? Aquí está el aplicación completa - Alan Bell

@AlanBell No entiendo. El código anterior reemplaza su código original y funciona correctamente con el marcado de demostración que proporcionó. - Sampson

@AlanBell ¿Te gusta esto? jsfiddle.net/jonathansampson/qQWT7/4 Tenga en cuenta que estoy seguro de que .html la porción podría simplificarse, pero mi conocimiento del golf es muy pobre, por lo que dejo el código en una estructura similar. - Sampson

Gracias por su ayuda para acortar mi código en más de 900 líneas. Pero tengo una pregunta más si pudieras resolverlo aquí hay un enlace a la Página de prueba. Este llenará automáticamente los pares, el problema es que solo puede tener 1 curso y no quiero que tenga al menos más. - Alan Bell

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.