web-dev-qa-db-fra.com

Plusieurs identifiants dans un seul événement de clic JavaScript

En JavaScript, j'utilise l'événement click pour modifier les données du graphique. Voici une méthode pour l'événement 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
            });
        });

J'ai besoin de minimiser ces trois événements de clic en un seul événement, cela signifie que je veux écrire un événement de clic qui gère les identifiants. quelque chose comme le code ci-dessous.

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


Je ne sais pas comment faire exactement. Le code ci-dessus n'est pas correct, c'est juste mon manque de connaissance de JavaScript.

javascriptjqueryevent-handlingclick
15
MAR

Je suggère de créer un objet et de sélectionner les éléments à l'aide de classes, id de l'élément cliqué récupère la valeur de la propriété correspondante de l'objet d'assistance:

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

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

Essaye ça:

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

Code mis à jour

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

Utilisez une classe.

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

Et puis sur chacun des éléments # pro1, # pro2, # pro3, ajoutez une classe de 'pro'

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

Vous pouvez donner à tous vos éléments un nom de classe et utiliser le sélecteur: eq () dans jQuery.

0
Dominic Sore