javascript新手：什么'；对多个元素应用相同行为的正确方法是什么？

我第一次尝试javascript，完全没有方向感。我想显示一个缩略图，打开一个具有更大图片视图的模式（这是我真正需要的唯一前端幻想，所以我尽量保持简单）。我从w3schools复制了代码，它使用getElementById。它对页面上的第一个图像非常有效，但单击后续图像不会弹出任何内容。读一下堆栈溢出，这听起来像是因为我在匹配id，但是页面上的每个元素将/应该有不同的id（这很有意义）

我看到一篇帖子，帖子中的人通过添加元素的id使id唯一。我可以做类似的事情，但我（a）想检查这是否符合犹太教义，（b）显然id将不再匹配，所以是否有一些不同的属性我会将我的HTML与我的样式匹配？这一定是一个常见的问题-对页面上的多个元素应用相同行为的正确方法是什么？例如，我可以给他们

谢谢

更新：根据下面每个人的反馈，我修改了代码以使用getElementByClassName而不是getElementById-请参见此处要点：

---

如果我正确地阅读了代码，那么我要更改的重要行是从第115行到第116行（根据类名而不是id设置图像信息），并在样式行5和11中将“myImg”替换为“popup”，但是单击第一个图像不再打开模式，因此我错过了一些内容。有人看到我需要它工作的地方了吗？

你应该使用类名（在所有img中都是相同的）而不是id，然后使用

getElementsByClassName（）

来获取所有的类名，而不是

getElementsById（）

，因为id必须是唯一的

然后，您应该以某种方式存储完整大小图像的url，以便无论单击哪个img都能获取它。一种方法可能是使用数据属性

例如：

<img src="thumb1.jpg" data-fullsize="full1.jpg" class="popup">
<img src="thumb2.jpg" data-fullsize="full2.jpg" class="popup">
<img src="thumb3.jpg" data-fullsize="full3.jpg" class="popup">

---

var elems=document.getElementsByClassName（“弹出”）；
为了（var i=0；i回答您的主要问题，ID“应该”[1]是唯一的，因此除非您提出前缀或正则表达式之类的约定，否则无法轻松使用它们将元素分组在一起

如果您想将多个元素组合在一起，您可以使用一个类，在这种情况下，您不需要使用
getElementById

尽管如此，我也不建议这样做；使用普通JavaScript制作复杂的应用程序可能非常耗时。您可能会尝试将UI与所有功能合并。这对于较小的应用程序非常有效，但可能会变得非常难以控制，特别是如果您不采取步骤允许自己在将来，在这种情况下，您将被困在一个应用程序中，很少有人可以轻松地进行培训和修改

不过，在使用框架之前学习该语言是正确的。JavaScript特别古怪

我建议您在学习JavaScript、HTML和CSS之后，创建一个web应用程序来研究现代JavaScript框架。（并专注于进行重构/升级/改进的练习，否则你将在2016年陷入困境，到2020年——你不必马上担心这一点，但在学习语言的同时开始学习如何做到这一点。）

要想找到框架，我建议探索一下外面有什么。这可能是一个手工编码的列表。探索详尽的列表也很好，比如只看一下。当然，除了GitHub之外，还可以查看其他地方


我碰巧知道AngularJS是最棒的，它也是最受欢迎的，但我建议你去探索并找到一个你喜欢的语法。你可能会发现另一个更直观的

请注意，所有功能与UI是如何分离的，它是如何声明的，
main
指令不知道图像是如何呈现的，它只是说下面是一些图像url和描述：

scope.images = [{
  url: 'http://www.w3schools.com/howto/img_fjords.jpg',
  description: 'Trolltunga, Norway'
},{
  url: 'http://www.w3schools.com/howto/img_fjords.jpg',
  description: 'Other Description'
},{
  url: 'http://www.w3schools.com/howto/img_fjords.jpg',
  description: 'Another Description'
}];

这就是初始化应用程序的原因：
，
类似于“main方法”，因为它是调用所有其他组件的组件

如果你小心地将演示问题从应用程序的其他部分中分离出来，那么测试应用程序的功能就容易多了。不过，学习JavaScript和可能的任何框架都需要一段时间，所以如果你只是在JavaScript中沾沾自喜，不要期望太快，但是如果你已经编写了一段时间的程序，那么你就应该我知道：）

（免责声明：我所做的不一定是“最佳实践”，因为我试图将其简化一点，以避免信息过多地淹没OP，尽管增加的复杂性在更高级的场景中很有用。）


[1] “假定”意味着浏览器可能会尽最大努力呈现页面，即使它不是“兼容”HTML。Web应用程序必须在不同的浏览器、操作系统和版本上使用相同的代码，所有这些都实现了标准（或选择不这样做）不同的是。如果你还没有遇到它，那将是一场噩梦。
CSS类、JS函数或对象。我建议先阅读或类似的书籍，然后是.IDs。确实需要是唯一的。但是如果你对多个元素应用相同的行为，我根本不建议使用IDs，我会给所有元素相同的类，然后选择你可以给你想要的目标元素分配一个
类
。然后CSS和Javascript可以附加到这个类的所有元素上。你也可以研究事件委派，特别是当你处理动态内容的时候。谢谢大家！好的，我根据需要更新了三个点（见更新的描述和要点）但我有点不对劲，因为单击任一图像都不再br
scope.images = [{
  url: 'http://www.w3schools.com/howto/img_fjords.jpg',
  description: 'Trolltunga, Norway'
},{
  url: 'http://www.w3schools.com/howto/img_fjords.jpg',
  description: 'Other Description'
},{
  url: 'http://www.w3schools.com/howto/img_fjords.jpg',
  description: 'Another Description'
}];