Javascript 如何在多个对象上放置单击事件

这就是我试图为菜单中的每个选项调用

setState（id）

函数的方法。它不起作用。也许还有其他方法可以做到这一点

我知道函数中的函数不是一个好主意，但我是jQuery的新手，不知道如何修复它。谢谢你的回答

函数设置状态（id）{
开关（id）{
案例1:{break；}
案例2：{break；}
案例3：{break；}
案例4：{break；}
案例5：{break；}
案例6：{break；}
}			
}
$（'#按钮菜单'）。查找（'span'）。每个。（函数（）{
$（this）.on（“单击”，（函数（）{
setState（$（this）.data（“id”））
}))
});

选择1
选择2
选择3
选择4
选择5
选择6
不需要。每个函数，因为jQuery为您抽象了它

您可以简单地
$（'#按钮菜单'）。查找（'span'）。在（'click'，func…

jQuery会将事件应用到选择器返回的每个按钮。
代码的主要问题是，每个
之后的
都会导致语法错误。您可以在控制台中看到这一点。请注意，当某些JS代码无法按预期工作时，这应该是您检查的第一个位置。在大多数浏览器中按F12键可打开此开关

您还可以做其他几件事来改进逻辑：


删除
find（）
并直接选择
#按钮菜单span
元素
完全删除
each（）
。可以将事件处理程序作为一个组添加到元素集合中
您不需要在
（）


函数设置状态（id）{
开关（id）{
案例1：{
console.log（'one'）；
打破
}
案例2：{
console.log（'two'）；
打破
}
案例3：{
console.log（'three'）；
打破
}
案例4：{
console.log（'4'）；
打破
}
案例5：{
console.log（'5'）；
打破
}
案例6：{
console.log（'six'）；
打破
}
}
}
$（'#按钮菜单span'）。单击（函数（）{
setState（$（this）.data（“id”）；
})；

选择1
选择2
选择3
选择4
选择5
选择6
更简单的方法是使用事件委派。这意味着在容器元素上放置一个单击处理程序，并捕获所有冒泡到顶部的子事件，即事件冒泡。下面的快速示例：

按钮菜单
是本例中的容器元素

$("#button-menu").on('click', function(e){
    let id = $(e.target).data("id");
    setState(id);
    console.log(id);
});

希望这能有所帮助。
删除“each”之后的“.”，您就没事了。
在
each（）之后的
有一个非常明显的语法错误。
解决了这个问题，您显示的代码工作正常，尽管您可以删除
each（）
因为您根本不需要它。您可能应该在
开关中添加一些
break；
语句，以阻止条件也出现。$（“#按钮菜单”）。查找（'span'）。打开（“单击”，…）；就足够了，这很不幸，因为我在那一行出现了语法错误，我找不到问题所在。：/如前所述，如果在
之后删除
。
代码有效。这看起来只是一个输入错误，非常感谢你，我太盲目了。”。感谢您提供删除每条语句的建议。OP使用的是
数据id
，而不是实际的
id
属性，因此使用
数据（'id'））
是正确的。@RoryMcCrossan可以自由地详细说明。对不起，我的错误。我不知道您已经将事件处理程序直接附加到
#按钮菜单
。请注意，您可以使用jQuery的委托
on（）
签名进一步简化逻辑：
$（“#按钮菜单”）。on（'click'，span'，function（e）{setState（$（此）.data（'id'）；}）；