下拉菜单，其中每个项目都会更改上面的图像

Question

我的目标是创建一个下拉菜单，当单击下拉菜单的每个项目时，它会通过替换之前的图像在其上方显示不同的图像。我一直使用这些页面作为指导：

Stack Overflow

W3Schools Dropdown

下拉菜单有九个选项，html 如下所示：

<div class="dropdown">
<img id="a_features" src="a_features" style="display:none;"/>
<button onclick="myFunction()" class="dropbtn">Change in Audio Features Over Time</button>
<div id="myDropdown" class="dropdown-content">
  <a onclick="danceability()">Danceability</a>
  <a onclick="duration()">Duration</a>
  <a onclick="energy()">Energy</a>
  <a onclick="instrumentalness()">Instrumentalness</a>
  <a onclick="liveness()">Liveness</a>
  <a onclick="loudness()">Loudness</a>
  <a onclick="speechiness()">Speechiness</a>
  <a onclick="tempo()">Tempo</a>
  <a onclick="valence()">Valence</a>
</div>

我正在使用的函数的一个示例，除了图像源之外，它们都是相同的，是这样的：

function danceability(){
    var pic = "https://imgur.com/Ga5bnai"
    document.getElementById('a_features').src = pic.replace('90x90', '225x225');
    document.getElementById('a_features').style.display='block';
}

当我使用堆栈溢出示例（“http://img.tesco.com/Groceries/pi/118/5000175411118/IDShot_90x90.jpg”）中使用的图像时，此设置有效，但当我尝试链接时失败它到 imgur 上托管的图像。这是图像源的问题吗？如果是，我该如何解决？

Answer 1

在我看来，您正在使用的 imgur 链接（如果它是您实际使用的链接），(a) 没有链接到图片，而是链接到网页 (b) 不包含“90x90” ，所以不会用其他任何东西代替它。 如果您将 src 替换为指向实际图像的链接，它可能会起作用。 此外，您可以概括该功能。您可以调用 1 个函数，并将图像 src 添加到数据属性中，而不是对每个项目调用不同的函数，例如：

<div id="myDropdown" class="dropdown-content">
  <a data-image="https://imgur.com/Ga5bnai">Danceability</a>
  <a data-image="https://imgur.com/35ewr">Duration</a>
  <a data-image="https://imgur.com/fas353F">Energy</a>
  <!-- ... -->
</div>

const image = document.getElementById('a_features');

const setImage = (element) => {
  const src = element.dataset.image;
  image.src = src.replace('90x90', '225x225');
  image.style.display = 'block';
}

document.querySelectorAll('#myDropdown a').forEach((item) => {
  item.addEventListener('click', () => setImage(item));
});

一个例子：https://codepen.io/dagropp/pen/WNZzaay