javascript - 使用按钮更改图像(也是图像)-Javascript

Question

所以我创建了这个:

我是 javascript 的新手，不是最好的，但想知道如何创建颜色选择器。 滑板的 3 个部分使用 z-index 放在一起。

HTML:

 <div class="container-fluid">
 <div class="row">
           <div class="col-md mbody">
                <div class="article">
                            <p align="left"><strong>Deck</strong></p>
            <img src="BlackButton.png" alt="Black Button" align="left" height="50">
            <img src="WhiteButton.png" alt="White Button" align="left" height="50">
            <img src="BlueButton.png" alt="Blue Button" align="left" height="50">
            <img src="GreenButton.png" alt="Green Button" align="left" height="50">
            <img src="OrangeButton.png" alt="Orange Button" align="left" height="50">
            <img src="RedButton.png" alt="Red Button" align="left" height="50">
            <img src="YellowButton.png" alt="Yellow Button" align="left" height="50">
            <img src="PinkButton.png" alt="Pink Button" align="left" height="50">
            <img src="PurpleButton.png" alt="Purple Button" align="left" height="50">

            <br><br>

            <p align="left"><strong>Trucks</strong></p>
            <img src="BlackButton.png" alt="Black Button" align="left" height="50">
            <img src="WhiteButton.png" alt="White Button" align="left" height="50">
            <img src="BlueButton.png" alt="Blue Button" align="left" height="50">
            <img src="GreenButton.png" alt="Green Button" align="left" height="50">
            <img src="OrangeButton.png" alt="Orange Button" align="left" height="50">
            <img src="RedButton.png" alt="Red Button" align="left" height="50">
            <img src="YellowButton.png" alt="Yellow Button" align="left" height="50">
            <img src="PinkButton.png" alt="Pink Button" align="left" height="50">
            <img src="PurpleButton.png" alt="Purple Button" align="left" height="50">

                        <br><br>

            <p align="left"><strong>Wheels</strong></p>
            <img src="BlackButton.png" alt="Black Button" align="left" height="50">
            <img src="WhiteButton.png" alt="White Button" align="left" height="50">
            <img src="BlueButton.png" alt="Blue Button" align="left" height="50">
            <img src="GreenButton.png" alt="Green Button" align="left" height="50">
            <img src="OrangeButton.png" alt="Orange Button" align="left" height="50">
            <img src="RedButton.png" alt="Red Button" align="left" height="50">
            <img src="YellowButton.png" alt="Yellow Button" align="left" height="50">
            <img src="PinkButton.png" alt="Pink Button" align="left" height="50">
            <img src="PurpleButton.png" alt="Purple Button" align="left" height="50">
            <br><br>

                </div>
           </div>
           <div class="col-md mbody">
                <div class="row">
                     <div class="aside">
                        <img src="Yellow_D.png" id="YellowD" alt="Yellow Deck" align="center">
                        <img src="Red_T.png" id="RedT" alt="Red Truck" align="center">
                        <img src="Blue_W.png" id="BlueW" alt="Blue Wheels" align="center">

                        <img src="transparent_background.png" id="skateBackground" alt="Skate Background" align="center" height="750" width="600";>

                     </div>
                </div>
            </div> 

我已经制作了每种颜色的每张图片，只需要切换

文件名:

*Color*_D.png = Deck

*Color*_T.png = Trucks

*Color*_W.png = Wheels

CSS:

#YellowD {
    position: absolute;
    left: 285px;
    top: 110px;
    padding-left:0px;
    z-index:0;
}

#RedT{
    position: absolute;
    left: 285px;
    top: 110px;
    padding-left:0px;
    z-index:1;
}

#BlueW{
    position: absolute;
    left: 285px;
    top: 110px;
    padding-left:0px;
    z-index:2;
}


#skateBackground {
 position:relative;
 padding-left:150px; 
 padding-top:50px; 
 padding-bottom:50px; 
 z-index: -1;

}

感谢任何帮助，我认为使用 onclick 和事件监听器是最好的方法，但我通常需要几个小时才能让一个简单的方法正常工作。

Answer 1

你快到了。首先，您需要为颜色选择器注册 onclick 事件。您可以为所有人(即车轮、甲板、卡车)使用 onclick 的单一功能。 首先向您的颜色选择器图像添加属性，以便在您的 onclick 回调中您可以找到被点击的确切图像。也注册一个onclick事件

    <img src="BlackButton.png" partType="D" col="Black" alt="Black Button" align="left" height="50" onclick="changeColor(event)">

将下面的 id 更改为具有连续字符串，因为它们只有 1 个实例

<div class="aside">
<img src="Yellow_D.png" id="deck" alt="Yellow Deck" align="center">
<img src="Red_T.png" id="truck" alt="Red Truck" align="center">
<img src="Blue_W.png" id="wheel" alt="Blue Wheels" align="center">

<img src="transparent_background.png" id="skateBackground" alt="Skate Background" align="center" height="750" width="600";>

</div>

// callback function for onclick event
function changeColor(event) {
  var type = event.srcElement.attributes.partType.value;
  var color = event.srcElement.attributes.col.value;
  if(type == "D") {
      document.getElementById("deck").src = color + "_D.png";
   }
   // similar for wheels and trucks
}