¿Puedo codificar la misma funcionalidad para 2 elementos de identificación en una función de un clic?

Question

¿Hay algún método para tener la misma codificación para la función de clic de dos elementos de identificación diferentes en una función de un clic?

Por ejemplo, tengo dos elementos de enlace con ids, myFormsTabSubmitted y formStatusSubmitted. Ambos enlaces tienen la misma funcionalidad. Cuando hago clic en estos dos enlaces, se muestra el mismo elemento div ("enviado") y otros divs están ocultos.

Entonces, en lugar de escribir dos funciones de clic, una para myFormsTabSubmitted y otra para formStatusSubmitted, ¿puedo tener una función de clic para ambas? Al igual que

$('#myFormsTabSubmitted #formStatusSubmitted').click(function(){ 
      $('#allMyForms').hide(); 
      $('#draftedMyForms').hide(); 
      $('#submittedMyForms').show(); 
      $('#myFormsTab').find(".selected").removeClass(); 
      $('#myFormsTabSubmitted').addClass("selected"); 
     }); 

Answer 1

sólo tiene que utilizar el separador de coma en el selector:

$("#myFormsTabSubmitted, #formStatusSubmitted").click(function() { 
    // do stuff 
}); 

Answer 2

Ciertamente! El cambio más sencilla de su código sería añadir una coma:

$('#myFormsTabSubmitted, #formStatusSubmitted').click(...); 

También puede almacenar una referencia a su controlador de clic y añadirlo a varias selecciones:

var myHandler = function() { ... }; 
$('#myFormsTabSubmitted').click(myHandler); 
$('#formStatusSubmitted').click(myHandler); 

Answer 3

Obviamente la coma es el camino para ir, pero me gustaría señalar que las funciones en cualquier idioma están diseñadas para lo que estás pidiendo, que es escribir el código una vez para varios elementos. Creo que la documentación de jquery da la impresión de que las funciones deben seguir a los eventos, lo que no sucede. Usted puede ir con:

function formSubmit() { 
         $('#allMyForms').hide(); 
         $('#draftedMyForms').hide(); 
         $('#submittedMyForms').show(); 
         $('#myFormsTab').find(".selected").removeClass(); 
         $('#myFormsTabSubmitted').addClass("selected"); 
} 

$('#myFormsTabSubmitted, #formStatusSubmitted').click(formSubmit); 

o

$('#myFormsTabSubmitted').click(formSubmit); 
$('#formStatusSubmitted').click(formSubmit); 

De esta manera, si se quería utilizar esa función para otro evento, usted no tendrá que apretar en, sobre todo si no es una al hacer clic.

Answer 4

cuando jquery hace su objeto como $ ('# id') toma la cadena pasada en el parámetro $() con el cálculo de esa cadena jquery devuelve el objeto. Y ese retorno de objetos por jQuery es solo otro objeto de jQuery que realiza todas las acciones de eventos o propiedades de jQuery. Así que cuando usamos:

$('#myFormsTabSubmitted, #formStatusSubmitted').click(); 

jQuery devolver el objeto de dos objetos de JavaScript. Es por eso que funciona para estos dos elementos o puede ingresar cualquier cantidad de elemento por coma separada.