下拉菜单更改显示的图像时出现问题

Question

我的目标是拥有一系列的 4 张图像，您可以单击它们，出现一个下拉菜单，然后可以进行新的选择。新选择应将图像更改为与选择对应的图像。这是我到目前为止所拥有的。

<div class="container">
  <div class="row">
    
    <h2>Test v0.1</h2>
    <p>Click to see the available options</p>

  <div class="col-md-3">
    <div class="dropdown">
      <a href="#" id="imageDropdown" data-toggle="dropdown">
        <img id="Cube1" src="img/Configs/Cube01Config01.png">
      </a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="imageDropdown">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 1</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 2</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 3</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Default Cube</a></li>
      </ul>
    </div>
  </div>
  
  <div class="col-md-3">
  <div class="dropdown">
      <a href="#" id="imageDropdown" data-toggle="dropdown">
        <img id="Cube2" src="img/Configs/Cube01Config01.png">
      </a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="imageDropdown">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 1</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 2</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 3</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Default Cube</a></li>
      </ul>
    </div>
  </div>

  <div class="col-md-3">
    <div class="dropdown">
        <a href="#" id="imageDropdown" data-toggle="dropdown">
          <img id="Cube3" src="img/Configs/Cube01Config01.png">
        </a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="imageDropdown">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 1</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 2</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 3</a></li>
          <li role="presentation" class="divider"></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Default Cube</a></li>
        </ul>
      </div>
    </div>

    <div class="col-md-3">
      <div class="dropdown">
          <a href="#" id="imageDropdown" data-toggle="dropdown">
            <img id="Cube4" src="img/Configs/Cube01Config01.png">
          </a>
          <ul class="dropdown-menu" role="menu" aria-labelledby="imageDropdown">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 1</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 2</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 3</a></li>
            <li role="presentation" class="divider"></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Default Cube</a></li>
          </ul>
        </div>
      </div>
</div>

这就是我用来收听和切换图像的东西，在修改太多之后它在当前状态下不再工作了。

$(document).ready(function() {
  // Listen for changes in the dropdown menus
  $('.dropdown-menu a').click(function() {
    // Get the text of the selected dropdown menu item
    var cubeName = $(this).text();

    // Update the image based on the selected dropdown menu item
    if (cubeName == 'Cube 1') {
      $('#cube1').attr('src', 'img/Configs/Cube01Config01.png');
    } else if (cubeName == 'Cube 2') {
      $('#cube1').attr('src', 'img/Configs/Cube02Config01.png');
    } else if (cubeName == 'Cube 3') {
      $('#cube1').attr('src', 'img/Configs/Cube03Config01.png');
    } else if (cubeName == 'Default Cube') {
      $('#cube1').attr('src', 'img/Configs/Cube01Config01.png');
    }
  });
});

任何帮助、替代方法或指向正确的方向都会非常有帮助！

Answer 1

您在 if 语句中使用小写字母选择“#cube1”，将其更改为“#Cube1”，它应该再次起作用