Javascript：我想在每次翻转不同的文本时更改div中的图像

Question

对可能模糊的问题道歉。

我正在尝试制作一个乐队列表，这些乐队在翻转[乐队名称]时会改变特定于该乐队的图像。我试图这样做作为一个开关声明，但我不能让它工作？我是一个相当新的JavaScript，所以任何帮助将不胜感激。以下是我到目前为止的情况：

function bandMouseOver(selection) {
  switch (selection) {
    case "1":
      document.getElementById('bandImage').src = 'images/band_test1.png'
      break;
    case "2":
      document.getElementById('bandImage').src = 'images/band_test2.png'
      break;
    default:
      document.getElementById('bandImage').src = 'images/band_test.png'
  }
}

.bands {
  text-decoration: none;
  color: white;
}

.bands:hover {
  color: #E05A6D;
}

<div id="headlines">
  <h2> Line Up</h2>
  <div id="imageHolder">
    <img id="bandImage" src="images/band_test.png">
    <p>BAND DESCRIPTION
      <p>
  </div>
  <div id="lineUpDay">
    <div id="days">
      <a href="#" class="bands" onmouseover="bandMouseOver(1)">Bon Jovi</a>
      <a href="#" class="bands" onmouseover="bandMouseOver(2)">Eminem</a>
    </div>
  </div>
</div>

Answer 1

这是因为你将数字传递给你的函数，但是转换为字符串。使它们成为数字或字符串，它将起作用（下面我已交换数字开关）

function bandMouseOver(selection) {
  switch (selection) {
    case 1:
      document.getElementById('bandImage').src = 'http://via.placeholder.com/150x150?text=1';
      break;
    case 2:
      document.getElementById('bandImage').src = 'http://via.placeholder.com/150x150?text=2';
      break;
    default:
      document.getElementById('bandImage').src = 'http://via.placeholder.com/150x150?text=3';
      break;
  }
}

.bands {
  text-decoration: none;
  color: white;
}

.bands:hover {
  color: #E05A6D;
}

<div id="headlines">
  <h2> Line Up</h2>
  <div id="imageHolder">
    <img id="bandImage" src="http://via.placeholder.com/150x150?text=0">
    <p>BAND DESCRIPTION
      <p>
  </div>
  <div id="lineUpDay">
    <div id="days">
      <a href="#" class="bands" onmouseover="bandMouseOver(1)">Bon Jovi</a>
      <a href="#" class="bands" onmouseover="bandMouseOver(2)">Eminem</a>
    </div>
  </div>
</div>

Answer 2

您需要在鼠标悬停中添加引号以传递开关的字符串而不是数字1或2，然后才能正确切换。我将乐队名称设为黑色，以便您可以看到它在悬停时更改图像。

function bandMouseOver(selection) {
  switch (selection) {
    case "1":
      document.getElementById('bandImage').src = 'images/band_test1.png'
      break;
    case "2":
      document.getElementById('bandImage').src = 'images/band_test2.png'
      break;
    default:
      document.getElementById('bandImage').src = 'images/band_test.png'
  }
}

.bands {
  text-decoration: none;
  color: black;
}

.bands:hover {
  color: #E05A6D;
}

<div id="headlines">
  <h2> Line Up</h2>
  <div id="imageHolder">
    <img id="bandImage" src="images/band_test.png">
    <p>BAND DESCRIPTION
      <p>
  </div>
  <div id="lineUpDay">
    <div id="days">
      <a href="#" class="bands" onmouseover="bandMouseOver('1')">Bon Jovi</a>
      <a href="#" class="bands" onmouseover="bandMouseOver('2')">Eminem</a>
    </div>
  </div>
</div>

Answer 3

我想提供一个更易于管理的替代解决方案，您可以看到completed code here。

您可以将图片存储在实际的<a>标记上，也可以在我的示例{@ 1}}中包含<li>，而不是使用切换语句。 HTML元素具有dataset，允许您存储自定义数据属性。您的用例是将图像存储为自定义数据attr。

接下来，您可以直接在Javascript中查询元素，而不是直接在元素上添加事件处理程序。你的所有元素都有＆＃34; band＆＃34; classname是共同的，所以我们可以使用<a>。现在getElementsByClassName返回HTMLCollection。您不能使用forEach语句直接迭代HTMLCollection，因为它不是Array类型。但是，您可以使用Array.from将集合转换为数组。

当您遍历元素时，您可以将lister添加到其中。在我的作品中，我添加了你的document.getElementsByClassName('band')听众并设置背景。但是我怀疑你可能想要在用户mouseover时删除图像，所以我也添加了它。

以下是上段直接相关的代码。其余的都在JSBin中。

mousesout

• 选择所有乐队function initializeBandRollovers() { const bands = document.getElementsByClassName('band'); Array.from(bands).forEach((b) => { b.addEventListener('mouseover', (e) => { b.style.backgroundImage = 'url(' + b.dataset.img + ')'; }); b.addEventListener('mouseout', (e) => { b.style.backgroundImage = null; }); }) } initializeBandRollovers();
• 将HTMLCollection转换为数组const bands = document.getElementsByClassName('band');
• 迭代所有乐队Array.from(bands)

• 将Array.from(bands).forEach和mouseover元素添加到每个带项...

  b.addEventListener（＆＃39; mouseover＆＃39;，（e）=＆gt; {   b.style.backgroundImage =＆＃39; url（＆＃39; + b.dataset.img +＆＃39;）＆＃39 ;; }）; b.addEventListener（＆＃39; mouseout＆＃39;，（e）=＆gt; {   b.style.backgroundImage = null; }）;