Question

所以我创建了一个按钮的下拉菜单，其中有子菜单，我希望其中的每个按钮将单个图像更改为不同的图像（每个按钮带有它自己的图像，除了下拉类别按钮）I＆＃39;用图像阵列思考，所以我不必拥有这么多功能。这是我的按钮下拉列表的代码。我意识到它没有风格。此外，我不希望图片取代菜单或按钮，而是单独找到。

    <!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
    background-color: whitesmoke;
    color: black;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}


    .dropbtn2 {
    background-color:#f9f9f9;
    color: black;
    padding: 8px;
    font-size: 16px;
    min-width: 160px;
    border-style: outset;
    cursor: pointer;
}



.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

.dropdown {
    position:relative;
    display: block;
}

.dropdown-content {
    display:none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-choices {
    display: none;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow:auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;

    }



.show {display:block;}



</style>
</head>
<body>



<div class="dropdown">
<button id='btn0'class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <button id='home' class="dropbtn2">Home</button><br/>
      <div id="myDropdown2" class="dropdown-choices">
        <button value="0"selected>Pencil</button><br/>
        <button value="1">Eraser</button><br/>
        <button value="2">Ruler</button><br/>
      </div>
    <button id='school' class="dropbtn2">School</button><br/>
      <div id="myDropdown3" class="dropdown-choices">
        <button value="3">Football</button><br/>
        <button value="4">baseball</button><br/>
      </div>

  </div>
</div> 


<script type="text/javascript">


document.getElementById("btn0").addEventListener("click", function(){   
  document.getElementById("myDropdown").classList.toggle("show");
});
document.getElementById("home").addEventListener("click", function(){    
  document.getElementById("myDropdown2").classList.toggle("show");
});
document.getElementById("school").addEventListener("click", function(){    
  document.getElementById("myDropdown3").classList.toggle("show");
});


</script>

<script type="text/javascript">





    </script>
    </body>
    </html>

这是一个changeimage（）函数，我必须使用我的代码版本，使用选择菜单而不是按钮。它工作得很完美，但我无法使用按钮，任何想法如何使其工作或获得类似的工作。对不起，我自学了自己，所以我的代码可能很奇怪。感谢您提供任何帮助和/或提示。

 <body>

  <select id="choose_img" onchange="changeImage()" class="OptionMenu1">
    <optgroup label="Common Office Supplies"\>
    <option value="0" selected>Pencil</option>
    <option value="1">Eraser</option>
    <option value="2">Ruler</option>
    </optgroup>
    <optgroup label="Common Sports Balls">
    <option value="3">American Football</option>
    <option value="4">Baseball</option>
    </optgroup>
  </select>
  <br/>
  <img id="image" class="Image1"/>


<script type="text/javascript">    

var imgArray = [
"pic_pencil",
"pic_eraser",
"pic_ruler",
"pic_football",
"pic_baseball"
];

var selectImg = document.getElementById("choose_img");
var imgElement = document.getElementById("image");

function changeImage()
{
  var index = selectImg.value;
  imgElement.src = imgArray[index];
}

// select the first image
changeImage(0);

Answer 1

如果我遇到了您的问题，您只需点击按钮即可调用ChangeImage功能。

<button onclick="changeImage(3)">Football</button>

希望它会对你有所帮助。

使用单个按钮更改imgarrays中的图像

1 个答案: