3

Tengo este trozo de código:

$('#btn_1, #btn_2').on('click', function() {    

  // Button 1
  let btn1conSpan = $('#btn_1 span');
  
  // Button 2
  let btn2conSpan = $('#btn_2 span');
  
  console.log(btn1conSpan.text());
  console.log(btn2conSpan.text());  
});
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<button id="btn_1"><span>Span1</span> Button 1</button>
<button id="btn_2"><span>Span2</span> Button 2</button>

Cual funciona correctamente, ahora mi pregunta, es cuando quiero usar el selector $(this):

¿Es posible de alguna manera de saber cual de los id's se ha presionado (sin usar condiciones (if ( .. )))? ¿De tal forma que muestre el resultado como el primer ejemplo?

El segundo ejemplo muestra la idea que tengo, pero obviamente no da el resultado deseado:

$('#btn_1, #btn_2').on('click', function(){
  
  let $this       = $(this);

  // Button 1
  let btn1conSpan = $this.find('span'); // Que sea el selector #btn_1
  
  // Button 2
  let btn2conSpan = $this.find('span'); // Que sea el selector #btn_2
  
  console.log(btn1conSpan.text()); // Resultado deseado: Span1
  console.log(btn2conSpan.text()); // Resultado deseado: Span2 
});
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<button id="btn_1"><span>Span1</span> Button 1</button>
<button id="btn_2"><span>Span2</span> Button 2</button>

El resultado deseado del ejemplo 2 sea:

Span1
Span2

EDIT:

Veo que es algo lioso de entender la pregunta.

Simplifico lo máximo posible:

$('#btn_1, #btn_2').on('click', function() {    

  // Quiero seleccionar con $(this) de esta forma

  $(this).elemento1; // Que sea #btn_1
  $(this).elemento2; // Que sea #btn_2
});

Hay una forma de hacerlo así de simple?

19
  • ¿Por qué no quieres usar una condición para saber cual elemento fue clickeado?
    – Jorius
    Commented el 17 feb. 2017 a las 22:24
  • @Jorius - No es que no quiera, simplemente quiero saber si hay una posibilidad.. si no la hay me quedo con la primera (más limpia) Commented el 17 feb. 2017 a las 22:27
  • ¿Entonces en si cual es tu pregunta o problema? Porque básicamente ya te estás respondiendo, ¿Quieres identificar el id del elemento clickeado y mostrar el texto de todo lo anidado en el selector?
    – Jorius
    Commented el 17 feb. 2017 a las 22:36
  • 1
    Ahora me ha quedado claro, ¡me doy a la tarea de edición que está bueno el problema! :D
    – Jorius
    Commented el 17 feb. 2017 a las 22:39
  • 1
    En teoría, sólo con $(this) no se podría hacer. this es el elemento objeto de la acción, pero no guarda ningún tipo de información de los otros elementos que haya en el selector, por lo que desde btn_1 no se podría saber si btn_2 es parte del selector para hacer click en él (y viceversa). Por eso preguntaba que si esa era tu estructura, porque lo más parecido sería seleccionar los elementos hermanos y forzar un click en ellos también
    – Alvaro Montoro
    Commented el 18 feb. 2017 a las 0:02

5 respuestas 5

4

En teoría, sólo con $(this) no se podría hacer. this es el elemento objeto de la acción, pero no guarda ningún tipo de información de los otros elementos que haya en el selector, por lo que desde btn_1 no se podría saber si btn_2 es parte del selector para hacer click en él (y viceversa).

Por eso preguntaba que si esa era tu estructura, porque lo más parecido sería seleccionar los elementos hermanos y forzar un click en ellos también... aunque eso también es un poco complicado (tampoco en exceso).

En versiones antiguas de jQuery estaba selector que te devolvía el selector utilizado, pero se consideró obsoleto a partir de la versión 1.7 y se eliminó en la 1.9 (aparte de que parece que no era muy eficaz).

Otra opción, aunque personalmente la consideraría hacer algo de trampa, es pasar el selector como parámetro al controlador del evento click y a partir de ahí usarlo para realizar lo que quieres (algo parecido a lo que ponía en los comentarios y al método de Jorius). Usando on puedes pasar datos opcionalmente:

.on( events [, selector ] [, data ], handler )

que se leerán en el dataset. Sí técnicamente no es this, por eso digo que es "trampa", pero funciona y sólo tendrías que escribir el selector en un sitio:

var miSelector = '#btn_1, #btn_2';

$(miSelector).on('click', { selector: miSelector }, function(e){
  
  $(e.data.selector).each(function() {
    console.log($(this).find("span").text() );
  });
  
});
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>

<button id="btn_1"><span>Span1</span> Button 1</button>
<button id="btn_2"><span>Span2</span> Button 2</button>

1
  • lo suponía que no hubiera un método más limpio ... +1 Commented el 18 feb. 2017 a las 0:45
2

No creo que se puedan diferenciar los selectores mediante el objeto $(this) (no encontré nada en la documentación oficial y buscando un rato por internet) pero puedes asignar cada uno de los objetos a una variable de la siguiente forma:

Creamos una función llamada trigger pasandole como argumento nuestro selector y que se desencadena cuando cualquiera de nuestros elementos sea clickeado, allí en la función le hacemos un .each a dichos elementos y pusheamos los respectivos objetos al objeto buttons y luego mostramos sus respectivos text como variables independientes

var buttons = {};

function trigger(selector){
  $(selector).each(function(i, e){
    let c = i+1;
    buttons['btn'+c+'conSpan'] = $('#' + e.id + ' span');
  });
}

$('#btn_1, #btn_2').on('click', function() {
  trigger('#btn_1, #btn_2');
  console.log(buttons.btn1conSpan.text());
  console.log(buttons.btn2conSpan.text());
});
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<button id="btn_1"><span>Span1</span> Button 1</button>
<button id="btn_2"><span>Span2</span> Button 2</button>

15
  • La verdad no me es útil... es lo mismo del ejemplo 2... pero quiero el resultado como el ejemplo 1 Commented el 17 feb. 2017 a las 22:31
  • @aldanux He editado mi respuesta, puedes revisar
    – Jorius
    Commented el 17 feb. 2017 a las 22:55
  • @Jorius pero eso es lo que no quiere Commented el 17 feb. 2017 a las 23:01
  • Sinceramente no entiendo que es lo que quiere entonces...
    – Jorius
    Commented el 17 feb. 2017 a las 23:01
  • @Jorius en realidad el resultado de tu ejemplo esta perfecto, pero El no quiere usar this Commented el 17 feb. 2017 a las 23:03
1

Espero sea útil.

<ul id="equipos">
     <li id="1"><a href="#">1</a></li>
     <li id="2"><a href="#">2</a></li>
     <li id="3"><a href="#">3</a></li>
     <li id="4"><a href="#">4</a></li>
</ul> 

$('#equipos').click(function(e){
     var id = e.target.id;
     alert(id);
}); 
1

Espero sea lo que buscas.

$('#btn_1, #btn_2').on('click', function(e) {    
  let val = $(this).find('span').text();
  let id = $(this).attr('id');
  	  console.log(val);
  	  console.log(id);
});
<button id="btn_1"><span>Span1</span> Button 1</button>
<button id="btn_2"><span>Span2</span> Button 2</button>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>

4
  • Lo siento pero tampoco es eso, porque quiero al mismo tiempo los dos elementos... Commented el 17 feb. 2017 a las 23:30
  • Su pregunta es encontrar el id del elemento que se presiono. this hace referencia al elemento que se presionó. y no es posible referenciar al que no se presionó con este selector. por lo tanto no entiendo el contexto de la pregunta.
    – DarkFenix
    Commented el 17 feb. 2017 a las 23:46
  • He editado la pregunta... espero que se entienda ahora mejor... Commented el 17 feb. 2017 a las 23:59
  • La respuesta es No. dentro el click , this hace referencia al elemento que se dió click. a nada más.
    – DarkFenix
    Commented el 18 feb. 2017 a las 0:00
1

En complemento a la respuesta de @AlvaroMontoro, el código se podría simplificar más y con el beneficio de utilizar event delegation

Así por ejemplo:

$(document).on('click', '#btn_1, #btn_2', function(evt){
  $(evt.handleObj.selector).each(function() {
    console.log($(this).find('span').text());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<button id="btn_1"><span>Span1</span> Button 1</button>
<button id="btn_2"><span>Span2</span> Button 2</button>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.