2012-04-26 15 views
6

Probablemente tenga 7 u 8 en competencia con jQuery (en una escala de 1-10), por lo que no estoy seguro si esto incluso tiene sentido, pero me gustaría saber si alguien sabe de una función jQuery o posiblemente un complemento que permite que una rama de jQuery solo se ejecute si una condición dada es verdadera. De lo contrario, me gustaría saber si alguien piensa que el concepto es defectuoso de alguna manera (EDITAR y cómo es defectuoso)¿Hay alguna manera de realizar una derivación de jQuery encadenando solo si una condición es verdadera?

Si bien se podría controlar la unión de varios eventos usando la sintaxis de JavaScript normal, similar a esto:

var desiredElement = $('.parent')      // find the parent element 
        .hover(overFunction,offFunction) // attach an event while I've got the parent in 'scope' 
        .find('.child-element');   // then find and return the child 
if (booleanVar1) {          // if one condition 
    desiredElement.click(clickFunction1);    // attach one event 
} else if (booleanVar2) {        // or if a different condition 
    desiredElement.click(clickFunction2);    // attach a different event 
} else {             // otherwise 
    desiredElement.click(clickFunction3);    // attach a default event 
} 
$('.parent').find('.other-child')      // (or $('.parent .other-child') 
    .css(SomePredefinedCssMapping) 
    .hide() 
//... 

me preguntaba si hay una manera de hacerlo todo en jQuery o si hay una buena razón para no ... quizás algo como esto:

$('.parent')        // find the parent element 
    .hover({overFunction,offFunction})  // attach an event while I've got the parent in 'scope' 
    .find('.child-element')     // then find the child 
     .when(booleanVar1)     // if one condition 
      .click(clickFunction1)   // attach one event 
     .orWhen(booleanVar2)    // or if a different condition 
      .click(clickFunction2)   // attach a different event 
     .orElse()       // otherwise 
      .click(clickFunction3)   // attach a default event 
     .end() 
    .end() 
    .find('.other-child') 
     .css(SomePredefinedCssMapping) 
//... 

Nota: Creo que esto es sintácticamente correcta, asumiendo los valores booleanos y funciones se definen adecuadamente, pero estoy bastante seguro de que he recibido en toda la intención bastante clara

el jQuery propuesta parece un poco más ordenado a mí (??) ¿de acuerdo en desacuerdo? - entonces aquí están mis preguntas:

  • ¿Hay alguna parte de jQuery nativo que básicamente ya lo haga?
  • ¿Ya hay una extensión que permite este tipo de cosas?
  • ¿Es más difícil de hacer de lo que estoy pensando? (Creo que algo así como mantener el elemento actual establecido si la condición es verdadera, presionar un elemento vacío establecido si la condición es falsa, y luego hacer estallar el conjunto de elementos para cada condición or lo haría, al igual que el método end() aparece de nuevo el conjunto anterior después de una llamada a find())
  • ¿Hay algo que lo haga significativamente menos eficiente?

EDITAR

La pregunta es cómo hacer esto con el encadenamiento de método o por qué sería desaconsejable (detalles prefiere). Si bien no solicita alternativas, tales alternativas pueden ser necesarias para explicar los problemas con un enfoque de encadenamiento jQuery. Además, dado que el ejemplo anterior evalúa inmediatamente los booleanos, cualquier otra solución debería hacer lo mismo.

+2

Definitivamente, hay un plugin para que en alguna parte, lo he visto escrito como respuesta en los foros antes de jQuery. Aunque no estoy de acuerdo con este tipo de sintaxis, está agregando más llamadas de función para algo que no necesariamente hace que la codificación sea más fácil. –

+5

esto es simplemente horrible –

+0

mientras aprecio los comentarios de TODOS (especialmente @ tereško - aunque no estoy seguro de estar de acuerdo), todavía no estoy viendo una respuesta real a ninguna de mis preguntas, así que voy a aguantar un rato más tiempo –

Respuesta

2
$('.parent').hover(overFunction,offFunction) 
    .find('.child-element') 
    .click(booleanVar ? clickFunction1 : 
      booleanVar2 ? clickFunction2 : 
      clickFunction3) 
    .end() 
    .find('.other-child') 
    .css(SomePredefinedCssMapping) 
+0

¡Gracias! Esto parece más cercano en espíritu a lo que esperaba encontrar, y podría ser lo suficientemente bueno para funcionar. Creo que había evitado esta táctica porque un intento similar en mal estado selectores CSS en "arrays asociativos" (como donde '... css ({(Boolvar "izquierda": "correctas"): "30px"})' provoca una error). Debe tener una evaluación inmediata de los booleanos, pero todavía no es tan "bonita" como yo _think_ jQuery encadenamiento sería - suponiendo que funciona, y no hay mejor respuesta, voy a aceptar que en algún momento –

+0

@CodeJockey derecho. Eso es porque es sintácticamente inválido ([referencia] (http: //es5.github.com#x11.1.5)). Este código funciona como usted pretende en el OP, y es mucho más conciso también. – Esailija

+0

@CodeJockey por cierto, '.hover ({hiperfunción, offFunction})' es válida sintácticamente (Aparece en el OP, he editado para el código de trabajo en mi respuesta) – Esailija

2

¿No pudo realizar esa lógica condicional en su controlador?

var boolVar1 = true, 
    boolVar2 = false; 

$(".foo").on("click", function(){ 
    if (boolVar1) clickFunction1(); 
    if (boolVar2) clickFunction2(); 
}); 
+0

Primero gracias por su respuesta - No lo había considerado - Aunque no me importa una pequeña cantidad de JavaScript "puro" (después de todo, debería ser más eficiente, ¿no?), La pregunta específicamente consulta el uso del encadenamiento de jQuery, ya sea jQuery nativo, un complemento o alguna otra razón es más difícil. hacer o significativamente una mala idea para hacer por mi cuenta. Además, la pregunta tiene una fuerte implicancia de _immediate_ evaluación de las variables booleanas, no se retrasa hasta que ocurre el evento click - si las variables cambian por cualquier razón antes del clic, esto cambiará el comportamiento - Editaré para hacer esto explícito –

+1

@rlemon - Aprecio que jQuery sea una biblioteca y que la función '$()' haga muchas cosas. La compensación de "tiempo de desarrollo/eficiencia" siempre es algo razonable de considerar y, en el ejemplo OP elemental, no hay una gran diferencia en el tiempo de desarrollo, quizás es por eso que no lo agregaron a jQuery (no es suficiente ahorro). para justificar el procesamiento adicional necesario?) Eso, sin embargo, no es parte de esta respuesta, y esta respuesta se comportará de manera diferente que el código en la pregunta en un nivel fundamental. –

+0

básicamente estás pidiendo declaraciones de jQuery if ... – rlemon

Cuestiones relacionadas