Mehrere IDs in einem einzigen JavaScript-Klickereignis

Lesezeit: 2 Minuten

Benutzer-Avatar
BESCHÄDIGEN

In JavaScript verwende ich ein Klickereignis, um Diagrammdaten zu ändern. Unten ist eine Methode für Klickereignisse.

$('#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
            });
        });

Ich muss diese drei Klickereignisse in einem Ereignis minimieren, dh ich möchte ein Klickereignis schreiben, das die IDs verarbeitet. etwas wie unten Code.

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

Ich weiß nicht, wie ich es genau machen soll. Der obige Code ist nicht korrekt, es liegt nur an meinen mangelnden JavaScript-Kenntnissen.

  • Benutze eine Klasse und das magische “this” 🙂

    – Gianpaolo DiNino

    29. August 2013 um 10:41 Uhr

  • es wäre viel einfacher, wenn pro wird ein Array sein

    – Igor Dymov

    29. August 2013 um 10:42 Uhr

  • Yep benutze eine Klasse und das “i” wäre $(this).index();

    – Romaindr

    29. August 2013 um 10:44 Uhr

Versuche dies:

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

  • im Jahr 2021, var that = this; sollte nur durch eine Pfeilfunktion ersetzt werden

    – Liam

    Vor 59 Minuten

Benutzer-Avatar
RAM

Ich würde vorschlagen, ein Objekt zu erstellen und die Elemente mithilfe von Klassen auszuwählen. id des angeklickten Elements ruft den Wert der entsprechenden Eigenschaft des Hilfsobjekts ab:

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

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

  • Diese Antwort ergibt keinen Sinn. .pros ist ein Selektor für eine Klasse namens Profis

    – Liam

    vor 1 Stunde


  • @Liam Dein Kommentar ergibt keinen Sinn. Ich hatte vorgeschlagen, Klassen zu verwenden. Deshalb gibt es dort einen Klassenselektor.

    – RAM

    Vor 46 Minuten


Benutzer-Avatar
Tushar Gupta – neugierigtushar

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

Aktualisierter Code

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

  • proN ist eine Variable, kein String. Wenn die Variablen global sind window[this.id] wird funktionieren.

    – RAM

    29. August 2013 um 10:43 Uhr


  • Glauben Sie wirklich, dass OP Zeichenfolgen als Diagrammdaten übergeben möchte?

    – Igor Dymov

    29. August 2013 um 10:43 Uhr

Verwenden Sie eine Klasse.

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

Und dann fügen Sie bei jedem der Elemente #pro1, #pro2, #pro3 eine Klasse von ‘pro’ hinzu.

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

Benutzer-Avatar
Dominik Wunde

Sie könnten allen Ihren Elementen einen Klassennamen geben und den Selektor :eq() in jQuery verwenden.

Benutzer-Avatar
Kundan

Mit jeder Funktion () können Sie dies tun

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

});});

1019390cookie-checkMehrere IDs in einem einzigen JavaScript-Klickereignis

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy