javascript - 没有硬编码位置的链接单击图像更改？

Question

我想做的是让访问者通过单击一组缩略图来更改图像。但是，我遇到的问题是我真的想避免将图像位置硬编码到脚本中。我希望脚本具有足够的可移植性，只要使用的 ID 匹配，就可以在任何旧页面和图像集上运行。有没有一种方法可以更改以下内容以用 X 的 src 替换 A、B 或 C 的 src？

JS

function clickSwitch() {
  var element = document.getElementById("bigscreen");
  element.setAttribute("src", "/img/projects/jamison/j2.jpg");
}

HTML

<img class="project-img" src="/img/projects/jamison/j1.jpg" alt="Jamison: View One" id="bigscreen" />

<ul class="project-thumbnails">
<li><a href="#n" onclick="clickSwitch();"><img src="/img/projects/jamison/j1.jpg" alt="Jamison: View One" /></a></li> 
<li><a href="#n" onclick="clickSwitch();"><img src="/img/projects/jamison/j2.jpg" alt="Jamison: View Two" /></a></li>
</ul>

Answer 1

我会将元素加载到一个数组中，在内联 html 之外为每个元素添加一个事件，等等等等......但是你开始吧:

将“this”添加到您的 onclick 事件，该事件将标记传递到 clickSwitch。从那里您可以获得大屏幕所需的内容。

html

<a href="#n" onclick="clickSwitch(this);"><img src="/img/projects/jamison/j1.jpg" alt="Jamison: View One" /></a>

javascript

function clickSwitch(el){
    var src = el.firstChild.getAttribute('src');
    var bigscreen = document.getElementById("bigscreen"); 
    bigscreen.setAttribute("src", src);
}