单个 JavaScript 点击事件中的多个 id答案

【问题标题】：Multiple id's in a single JavaScript click event单个 JavaScript 点击事件中的多个 id
【发布时间】：2013-08-29 10:40:19
【问题描述】：

在 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 的了解不够。

【问题讨论】：

使用一个类和魔法“this” :)
如果pro 是一个数组会容易得多
是的，使用一个类，“i”应该是 $(this).index();

标签： javascript jquery event-handling click

【解决方案1】：

试试这个：

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案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]
    });
});

【讨论】：

proN 是一个变量而不是一个字符串。如果变量是全局的，window[this.id] 将起作用。
你真的认为 OP 想要将字符串作为图表数据传递吗？

【解决方案4】：

使用类。

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

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

【讨论】：

您有 data: pro+i 没有为 pro 或 i 定义变量。已删除反对票。
干杯，正在进行中。实际上是在它的中间。

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

使用每个函数（）你可以做到这一点

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

});});

【讨论】：