El complemento jQuery no funciona cuando se llama dos veces

Question

Sé que este es un problema con la forma en que he codificado el complemento para tratar con varias instancias. Estoy bastante seguro de que al menos una de mis variables se sobrescribe con cada llamada subsiguiente del complemento. De todos modos, aquí está el código del plugin:

$.fn.extend({ 
dependsOn: function($claimer){ 
    $dependent = $(this); 
    $claimer.change(function(){ 
     alert($dependent.attr('id')); 
     var $selected = $('option:selected', this); 
     var pk = $selected.attr('class'); 

     $dependent.removeAttr('disabled'); 
     $dependent.find('option').each(function(){ 
      $hiddenOpts = $dependent.parent().find('.hiddenOptions'); 
      $hiddenOpts.append($(this)); 
      $hiddenOpts.find('option').each(function(){ 
       if($(this).attr('ref') == pk || $(this).hasClass('empty')) 
        $dependent.append($(this)); 
      }); 
     }); 
    }); 
} 
}); 

Cuando llamo $('.something').dependsOn($('.somethingElse'));, que funciona bien, pero si lo llamo otra vez en otros dos artículos, la variable dependiente $ se establece en ese elemento.

El objetivo del complemento es mantener los cuadros de selección deshabilitados hasta que se cambie un cuadro de selección anterior. Si tengo tres cuadros de selección seguidos y deseo que el primero esté habilitado, el segundo depende del primero y el tercero depende del segundo, llamaría al $(second).dependsOn($(first)) y al $(third).dependsOn($(second)), por lo que cambiar el primero permitiría el segundo pero no el tercero, y cambiar el segundo permitiría el tercero.

Pero con el código actual, cambiar el primero habilita el tercero, pero no el segundo (como dije, creo que es porque $ dependent se sobrescribe y se establece en el tercer elemento después de llamar a dependsOn dos veces).

Si eso no está claro, házmelo saber.

Answer 1

Esto se debe a que no está definiendo una nueva variable en el alcance de dependsOf (que se realiza utilizando var $dependent = blah). En su lugar, está estableciendo el valor de $ (this) en una versión global de $dependent.

Esa es la razón por la que está siendo reemplazado.

Buena suerte :)

Answer 2

La forma en que está declarando $dependant está haciendo que sea una variable de mundial , por lo que la próxima vez que la función es llamada asigna el mismo mundial $dependant al nuevo valor. Proveedores:

var $dependant = $(this);