Múltiples ID en un solo evento de clic de JavaScript

2 minutos de lectura

avatar de usuario
MAR

En JavaScript, estoy usando el evento de clic para cambiar los datos del gráfico. A continuación se muestra un método para el evento de clic.

$('#pro1').click(function () {
            chart.series[0].update({
                data: pro1
            });
        });
        $('#pro2').click(function () {
            chart.series[0].update({
                data: pro2
            });
        });
        $('#pro3').click(function () {
            chart.series[0].update({
                data: pro3
            });
        });

Necesito minimizar estos tres eventos de clic en un evento, lo que significa que quiero escribir un evento de clic que maneje las identificaciones. algo como el siguiente código.

$('#pro'+i).click(function () {
chart.series[0].update({
     data: pro+i
});
});

No sé cómo hacerlo exactamente. El código anterior no es correcto, es solo mi falta de conocimiento de JavaScript.

  • usa una clase y la magia “esto” 🙂

    – Gianpaolo Di Niño

    29 de agosto de 2013 a las 10:41

  • sería mucho más fácil si pro será una matriz

    – Ígor Dymov

    29 de agosto de 2013 a las 10:42

  • sí, usa una clase y la “i” sería $(this).index();

    – Romaindr

    29 de agosto de 2013 a las 10:44

Prueba esto:

var that = this;
$('#pro1,#pro2,#pro3').click(function () {
    chart.series[0].update({
        data: that[$(this).attr('id')];
    });
});

  • en 2021, var that = this; solo debe ser reemplazado con una función de flecha

    – Liam

    1 hora antes

avatar de usuario
RAM

Sugeriría crear un objeto y seleccionar los elementos usando clases, id del elemento en el que se hizo clic recupera el valor de la propiedad correspondiente del objeto auxiliar:

var pros = {
   pro1: '...',
   pro2: '...'
};

$('.pros').click(function () {
    chart.series[0].update({
        data: pros[this.id]
    });
});

  • Esta respuesta no tiene sentido. .pros es un selector para una clase llamada pros

    – Liam

    1 hora antes


  • @Liam Tu comentario no tiene sentido. Sugerí usar clases. Es por eso que hay un selector de clase allí.

    – RAM

    1 hora antes


avatar de usuario
Tushar Gupta – tushar curioso

$('#pro1,#pro2,#pro3').click(function () {
    chart.series[0].update({
        data: $(this).attr('id');
    });
});

Código actualizado

$('#pro1,#pro2,#pro3').click(function () {
    chart.series[0].update({
        data: window[this.id]
    });
});

  • proN es una variable no una cadena. Si las variables son globales window[this.id] trabajará.

    – RAM

    29 de agosto de 2013 a las 10:43


  • ¿De verdad crees que OP quiere pasar una cadena como datos de gráficos?

    – Ígor Dymov

    29 de agosto de 2013 a las 10:43

Usa una clase.

$('.pro').click(function () {
 chart.series[0].update({
   data: $(this).attr('id');
 });
});

Y luego en cada uno de los elementos #pro1, #pro2, #pro3 agregue una clase de ‘pro’

$("*[id^=pro]").click(function () {
    chart.series[0].update({
         data: $(this).attr('id');
    });
});

avatar de usuario
dominic dolor

Podría dar a todos sus elementos un nombre de clase y usar el selector :eq() dentro de jQuery.

avatar de usuario
kundan

Usando cada función () puedes hacerlo

var i =0;
$("#pro"+i+", #pro"+i+", #pro"+i+"").each(function(){
            $(this).on('click', function(){
chart.series[0].update({
     data: pro+i
});

});});

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad