Question

我用javascript进行了我的第一次冒险，完全没有我的方向。我想显示一个缩略图，打开一个带有更大图片视图的模态（这实际上是我唯一需要的前端幻想，所以我试图保持简单）。我已经从使用getElementById的w3schools复制了this代码。它适用于页面上的第一个图像，但点击后续图像不会弹出任何内容。阅读堆栈溢出它听起来像是因为我在id上匹配，但页面上的每个元素将/应该具有不同的id（这是有意义的）。

我看到了帖子here，其中该人通过附加元素的ID来使id唯一。我可以做类似的事情，但我（a）想检查一下是否是犹太洁食和（b）然后很明显，id将不再匹配，所以是否有一些不同的属性我会用来匹配我的HTML我的风格？这必须是一个常见问题 - 将相同行为应用于页面上的多个元素的正确方法是什么？例如，我可以给他们

谢谢！

更新：根据以下所有人的反馈，我修改了代码以使用getElementByClassName而不是getElementById-请参见此处：https://gist.github.com/dianekaplan/1602a7c0a1c1ec6aa103b61d6530ff15

如果我正确地阅读了代码，那么我要改变的重要行是从第115行到第116行 - （根据ClassName设置图像信息，而不是id） - 并替换＆＃39; myImg＆＃39;用popup＆＃39;在样式行5和11中，但单击第一个图像不再打开模态，所以我错过了一些东西。有人看到我需要它运作的错误吗？

Answer 1

您应该使用类名（在所有img中使用相同的名称）而不是ID，然后使用getElementsByClassName()来获取所有这些名称，而不是getElementsById()只获取一个（因为ID必须是唯一的））。

然后，你应该以某种方式存储完整尺寸图像的网址，以便无论点击哪个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("popup");
for(var i=0;i<elems.length;i++) {
    elems[i].onclick=function() {
         var fullsize=this.dataset.fullsize;
         //open de popup, fullsize has the clicked image url
    }
}

代码未经过测试，仅供参考。

Answer 2

要回答您的主要问题，ID＆＃34;应该＆＃34; [1]是唯一的，所以除非你想出一个诸如前缀或正则表达式之类的约定，否则你不能轻易地使用它们将元素组合在一起。

如果你想将多个元素组合在一起，你可以使用一个类，而不是getElementById而是使用getElementsByClassName。

话虽如此，我也不建议这样做;使用vanilla JavaScript制作复杂的应用程序非常耗时。您将很想将UI与您的所有功能合并。这适用于较小的应用程序，但它可能变得非常不守规矩，特别是如果你不采取措施让自己在将来重构，在这种情况下，你将被困在一个应用程序很少很容易接受培训开启和修改。

在框架之前学习语言是正确的。 JavaScript 尤其古怪。

我建议您在学习JavaScript，HTML和CSS之后创建一个Web应用程序来研究现代JavaScript框架。（并专注于练习能够重构/升级/改进，否则你将被困在2016年并且它将在2020年 - 你不必立即担心这一点，但要开始在学习语言的同时学习如何做到这一点。）

为了找到框架，我建议您去探索那里的内容。 Here's an example of one on GitHub.这可能是手动编码列表。探索详尽的清单也很不错，比如只看"most starred" Repositories on GitHub that are written in JavaScript。当然，除了GitHub之外还要检查其他地方。

我碰巧知道AngularJS是最好的，它恰好是最流行的之一，但我建议你去探索并找到一个你喜欢的语法。你可能会发现另一个更直观的。 Here's a plunker that shows how to solve that problem in AngularJS

注意所有功能是如何与UI分开的以及它是如何声明的 - main指令不知道图像是如何呈现的 - 它只是说这里是一些图像网址和描述：

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'
}];

这是初始化应用的原因：<html ng-app="plunker">和<main></main>类似于＆＃34;主要方法＆＃34;因为它是调用所有其他组件的组件。

如果您小心地将应用程序的其余部分与演示文稿问题分开，那么测试应用程序的功能会容易得多。但是，学习JavaScript和可能的任何框架都需要一段时间，所以如果你只是在JavaScript中沾沾自喜，不要过早地期待 - 但是如果你已经编程了虽然你已经知道了这个:)

（免责声明：我所做的并不是＆＃34;最佳做法和＃34;因为我试图简化它以免过多地用信息压倒OP，尽管增加的复杂性是有用的在更高级的场景中。）

[1]＆＃34;假设为＆＃34;意思是浏览器可以尽力渲染页面，即使它不符合标准。 HTML。 Web应用程序必须具有相同的代码才能在不同的浏览器，操作系统和每个版本的所有版本上实现标准（或选择不）。如果你还没遇到它，那就是噩梦。

新手：什么是将相同的行为应用于多个元素的正确方法？

2 个答案: