javascript - 单个 JavaScript 点击事件中的多个 id

Question

在 JavaScript 中，我使用点击事件来更改图表数据。下面是点击事件的方法。

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

我需要在一个事件中缩小这三个点击事件，这意味着我想编写一个处理 id 的点击事件。类似于下面的代码。

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

我不知道该怎么做。上面的代码是不正确的，只是我对 JavaScript 的了解不够。

Answer 1

尝试这个：

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

Answer 2

我建议创建一个对象并使用类选择元素，id单击的元素检索辅助对象的相应属性的值：

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

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

Answer 3

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

更新代码

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

Answer 4

使用一个类。

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

然后在每个#pro1、#pro2、#pro3 元素上添加一个“pro”类

Answer 5

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

Answer 6

你可以给你的所有元素一个类名，并在 jQuery 中使用 :eq() 选择器。

Answer 7

使用每个 function() 你可以做到

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

});});