时间戳

首页 > 解决方案 > 将图像分配给不同的按钮

javascript - 将图像分配给不同的按钮

问题描述

如何在单击每个不同按钮时更改图片并将显示的图片设为默认图片？

从代码片段中，请注意每个按钮应如何更改图像。

谢谢！

  * {
  box-sizing: border-box;
}

.imagebox {
  width: 50%;
  float: left;
  height: 300px;
  position: relative;
}

.imagebox img {
  position: relative;
  top: 40%;
  transform: translateY(-50%);
  overflow: hidden;
  width: 100%;
}

.textbox-cont {
  width: 50%;
  height: 300px;
  float: right;
  position: relative;
  overflow: hidden;
}

.textbox {
  color: #000000;
  position: absolute;
  text-align: center;
  width: 100%;
  padding: 20px;
  top: 53%;
  transform: translateY(-50%);
}

@media only screen and (max-width: 700px) {
  .imagebox,
  .textbox-cont {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
<div class="imagebox"></div>
<img src="https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687" alt="">
<div class="textbox-cont">
  <div class="textbox">
    Pick a color to see how it will look<br>
    <button style="margin: 8px;">Cobalt Blue</button><br>
    <button style="margin: 8px">Cobaltt Blue</button><br>
    <button style="margin: 8px">Cardinal Red</button><br>
    <button style="margin: 8px">Coral Orange</button><br>
  </div>
</div>

标签： javascriptcss

解决方案

您可以将EventListener添加到每个按钮并根据按钮更改图像src属性id：

const img = document.getElementById('img');
for (let button of document.getElementsByTagName('button')) {
  button.addEventListener('click', () => {
    switch (button.id) {
      case 'but1': 
        img.src = "https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687";
        break;
      case 'but2': 
        img.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTgfERcK1BcdgSekipirrCw6zpQJ9l40h48Musvp7-dfy8Ym3Yl&usqp=CAU";
        break;
      case 'but3': 
        img.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS9wvzviWw6ag6p_aZgw6kRs267_3jpiI_gGCxvLh7U9QIVAmQa&usqp=CAU";
        break;
      case 'but4': 
        img.src = "https://xzdl43v0mdf2m45tz2aj7kkv35-wpengine.netdna-ssl.com/wp-content/uploads/2010/10/orange-780x400.jpg";
        break;
    }
  });
}
*{
  box-sizing:border-box;
}

.imagebox {
  width: 50%;
  float: left;
  height:300px;
  position:relative;
}

.imagebox img{
  position:relative;
  top:40%;
  transform:translateY(-50%);
  overflow:hidden;
  width: 100%;
  
  
}

.textbox-cont {
  width: 50%;
  height:300px;
  float: right;
  position:relative;
  overflow:hidden;
}

.textbox{
  color: #000000;
  position:absolute;
  text-align: center;
  width:100%;
  padding:20px;
   top:53%;
  transform:translateY(-50%);
  
  
}

@media only screen and (max-width: 700px) {
  .imagebox,
  .textbox-cont {
    width: 100%;
   display: flex;
    flex-direction: column;
  }
<div class="imagebox">
  <img id="img" src="https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687" 
  alt="">
</div>
<div class="textbox-cont">
  <div class="textbox">
    Pick a color to see how it will look<br> 
    <button style="margin: 8px" id="but1">Cobalt Blue</button><br>
    <button style="margin: 8px" id="but2">Cobaltt Blue</button><br>
    <button style="margin: 8px" id="but3">Cardinal Red</button><br>
    <button style="margin: 8px" id="but4">Coral Orange</button><br>
  </div>
</div>

推荐阅读